Przykładowy karuzela na Twitterze 2.2: jak zachować proporcje obrazu?

Question

Jeśli zmniejszysz szerokość okna przeglądarki, gdy jesteś na http://twitter.github.com/bootstrap/examples/carousel.html, zobaczysz, że zmienia się współczynnik proporcji obrazu tła. Chciałbym go zachować (1: 1), przycinając mój obraz po lewej lub po prawej stronie, lub ustawiając go poziomo.

Co sugerujesz?

Answer 1

Masz opcje, a zarówno zachować proporcje obrazu:

Option 1

background: url(yourimage.jpg) no-repeat center center/cover; 

Ostatnia część jest własnością background-size: cover. Spowoduje to powiększenie obrazu tła w zależności od szerokości przeglądarki, aby upewnić się, że wypełni ono cały element w całości.

przykład: http://i.imgur.com/0tQ9Rxm.png

Wariant 2

background: url(yourimage.jpg) no-repeat center center; 

To samo działanie, ale bez powiększenia części. Tło zachowa swój wygląd i pozostanie wyśrodkowane, ale jeśli szerokość przeglądarki jest większa niż szerokość obrazu (w tym przypadku 1500 pikseli), zobaczysz kolor tła (w tym przypadku biały).

przykład: http://i.imgur.com/6x594jH.png

że zalecane Wariant 1. Efekt powiększania widzisz tylko wtedy, gdy zmieniasz rozmiar przeglądarki, ale prawie nikt jej nie używa, a odwiedzający zobaczy tylko wypełnione tło.

Answer 2

Jako kontynuację odpowiedzi @jgthms użyłem opcji 1. Jednak w Safari na iOS obraz tła w ogóle się nie wyświetlał. Wygląda na to, że jednoliniowa składnia CSS nie grała ładnie. Zmieniając go do dalszej udało mi się dostać pracy:

background: url(yourimage.jpg) no-repeat center center; 
background-size: cover; 

Answer 3

Dla tych, którzy, jak ja, nie widziałem gdzie CSS wchodzi w grę Oto przykład z kontekstu (ze stylem iOS) . Powinienem zauważyć, że używa on Bootstrap 3.1.1.

<div class="item active" style="background: url(slide1.jpg) no-repeat center center; background-size: cover;"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <p>Example text 
      <a class="btn btn-lg btn-primary" href="YourURLHERE" role="button">YourLink</a> 
      </p> 
     </div> 
     </div> 
    </div>