Zachowaj proporcje obrazu w karuzeli

Question

Używam Bootstrap do tworzenia karuzeli, mam duże obrazy, więc gdy ekran jest mniejszy niż obraz, proporcja nie jest zachowywana.

Jak mogę to zmienić?

Oto mój kod:

.carousel .item { 
    height: 500px; 
} 
.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

http://jsfiddle.net/DRQkQ/

muszę obraz, aby zmieścić 100% szerokości, ale zachować jego wysokość 500px (myślę, że to 500px) powinno to oznaczać, że na mniejszym ekranie mamy nie widzisz lewej i prawej strony obrazu.

Próbowałem zawierający obraz w div i dodać

overflow: hidden; 
width: 100%; 
height: 500px; 
display: block; 
margin: 0 auto; 

Ale to nie działa

Dziękujemy!

Answer 1

Problem leży tutaj, na bootstrap CSS:

img { 
    max-width: 100%; 
    width: auto 9; 
    height: auto; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 

Po ustawieniu max-width: 100%; obraz nie będzie żadnych większych niż wziernika. Trzeba przesłonić to zachowanie na CSS:

.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
    max-width: none; 
} 

Zanotuj max-width: none; dodany na dole. Jest to domyślna wartość maksymalnej szerokości i powoduje jej wyzerowanie.

Here's twoje skrzypce zaktualizowane.

Answer 2

Usuń znacznik img wewnątrz elementu karuzeli i dodaj tło. W ten sposób możesz użyć właściwości okładki CSS3.

.item1 { 
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 3

udało mi się to osiągnąć przez zakomentowanie linię wysokość od linii carousel.css jak pokazano poniżej:

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    /*height: 500px;*/ 
} 

Answer 4

Ten kod wreszcie pracował dla mnie:

.carousel .item { 
    background:#F9F9F9; 
    border:1px solid #E0E0E0; 
    overflow:hidden; 
    margin-bottom:1em; 
    margin-top:1em; 
    padding:5px; 
} 
.carousel-inner > .item > img { 
    border: 1px solid #DDDDDD; 
    float: left; 
    margin: 0pt 3px; 
    padding: 2px; 
    height: none; 
    width: 100%; 
} 

.carousel-inner > .item > img:hover { 
    border: 1px solid #000000; 
} 

Answer 5

Myślę, że lepiej jest obsłużyć go atrybutem CSS3 object-fit.

Jeśli masz obraz ze stałą szerokością i wysokością, a mimo to chcesz zachować proporcje, możesz użyć object-fit:contain;. Utrzyma proporcję z daną wysokością i szerokością.

Na przykład:

img { 
     height: 100px; 
     width: 100px; 
     object-fit: contain; 
} 

można znaleźć więcej szczegółów tutaj: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

nadzieję, że będzie użyteczna do kogoś.

Answer 6

Wygląda na to, że wyżej wymienione rozwiązania nie działają dla mnie (nie wiem dlaczego?), Ale znalazłem inne obejście przy użyciu javascript.

Zasadniczo jest to bardziej żmudna metoda, ale działa również. Za pomocą jQuery można ustawić wysokość karuzeli na szerokość podzieloną przez określony współczynnik proporcji.

Oto mój kod:

var aspectRatio = 2.5; //Width to Height!!! 
    var imageWidth; 
    var imageHeight; 

    //bind the window resize event to the method - 
    //change in carousel width is only triggered when size of viewport changes 
    $(window).on("resize", methodToFixLayout); 

    //updates the carousel width when the window is resized 
    function methodToFixLayout(e){ 

     imageWidth = carousel.width(); 
     console.log(""); 
     console.log("Method width" + imageWidth); 
     console.log(""); 

     imageHeight = imageWidth/aspectRatio; 

     carouselContainer.height(imageHeight);  
     carousel.height(imageHeight); 
     carouselPic.height(imageHeight); 

     //solve the carousel glitch for small viewports - delete the carousel 
     windowWidth = $(window).width(); 
     if (windowWidth < 840){ 
      carousel.hide(); 
      $("#side-navbar").hide(); 
     } else { 
      carousel.show(); 
      $("#side-navbar").show(); 
     } 



    } 

Wydaje się pracować dla mnie w porządku.

Mam nadzieję, że to działa również dla Ciebie.

Możesz ustawić współczynnik kształtu siebie lub użyć innej metody. Najpierw ustaw szerokość i wysokość okna na wymiar widoku, w którym obraz wygląda na dobrze sformatowany. Zapytanie o szerokość i wysokość, i wypracuj stosunek. Przywróć okno do oryginalnej szerokości i wysokości. Użytkownik nie zauważyłby zmiany w ogóle, ale wymiary byłyby rejestrowane.

Answer 7

aby utrzymać proporcje & pełne pokrycie karuzeli div:

img { 
object-fit: cover; 
overflow: hidden; 
    } 

Answer 8

Jak wspominają inni, CSS3 działa dobrze do tego. Użyłem pełnej szerokości, stałej wysokości pojemnika, a następnie przeskalowałem proporcje zachowywania obrazu za pomocą "okładki", a następnie wyrzuciłem przelew:

.carousel .carousel-inner img { 
    width: 100%; 
    height: 30em; 
    object-fit: cover; 
    overflow: hidden; 
}