Mantieni le proporzioni dell'immagine nel carosello

Question

Sto utilizzando Bootstrap per creare un carosello, ho immagini grandi quindi quando lo schermo è più piccolo dell'immagine, il rapporto non viene mantenuto.

Come posso cambiarlo?

Ecco il mio codice:

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

http://jsfiddle.net/DRQkQ/

Ho bisogno l'immagine per adattarla larghezza 100% ma mantenere la sua altezza di 500px (penso che sia 500px) questo dovrebbe significare che su schermo più piccolo che abbiamo non vedere l'estrema sinistra e l'estrema destra dell'immagine.

ho provato contenente l'immagine in un div e aggiungere

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

Ma non funziona

Grazie!

Answer 1

La questione stabilisce qui, il bootstrap CSS:

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

Dopo aver impostato max-width: 100%; l'immagine non ci sarà alcun più grande della finestra. È necessario eseguire l'override che il comportamento sul CSS:

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

Annotare il max-width: none; aggiunto alla parte inferiore. Questo è il valore di larghezza massima predefinito e disattiva il limite.

Here's aggiornato.

Answer 2

Eliminare il tag img all'interno dell'elemento del carosello e aggiungere uno sfondo. In questo modo è possibile utilizzare la proprietà di copertina 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

sono stato in grado di raggiungere questo obiettivo commentando la linea di altezza dalla linea carousel.css come illustrato di seguito:

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

Answer 4

Questo codice finalmente ha funzionato per me:

.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

Penso che sia meglio gestirlo con l'attributo CSS3 object-fit.

Se si dispone di un'immagine con larghezza e altezza fisse e se si desidera conservare le proporzioni, è possibile utilizzare object-fit:contain;. Manterrà il rapporto con altezza e larghezza dati.

Ad esempio:

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

Potete trovare maggiori dettagli qui: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Spero che questo sarà utile a qualcuno.

Answer 6

Apparentemente, le soluzioni sopra menzionate non hanno funzionato per me (non so perché?) Ma ho trovato un'altra soluzione usando javascript.

Fondamentalmente, questo è un metodo più noioso ma funziona anche. Usa jQuery per impostare l'altezza del carosello sulla larghezza divisa per un certo rapporto aspetto.

Ecco il mio codice:

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(); 
     } 



    } 

Sembra funzionare bene per me.

Spero che funzioni anche per te.

È possibile impostare lo stesso rapporto di aspetto o utilizzare un altro metodo. Innanzitutto, imposta la larghezza e l'altezza della finestra su una dimensione di visualizzazione in cui l'immagine appare ben formattata. Interroga la larghezza e l'altezza e calcola il rapporto. Ritorna la finestra alla larghezza e all'altezza originali. L'utente non avrebbe notato la modifica, ma le dimensioni sarebbero state registrate.

Answer 7

per mantenere le proporzioni & una copertura completa del carosello div:

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

Answer 8

Come altri hanno detto, CSS3 funziona bene per questo. Ho usato tutta la larghezza, altezza fissa per il contenitore, poi ridimensionato l'immagine mantenendo la proporzione con 'coperchio', quindi getta via l'overflow:

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