html - imagenes - Mantener la relación de aspecto de la imagen en el carrusel

slider de imagenes html

Question

Estoy usando Bootstrap para crear un carrusel, tengo imágenes grandes, así que cuando la pantalla es más pequeña que la imagen, la relación no se mantiene.

¿Cómo podría cambiar eso?

Aquí está mi código:

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

http://jsfiddle.net/DRQkQ/

Necesito que la imagen se ajuste al 100% de ancho pero mantenga su altura de 500 píxeles (creo que es de 500 píxeles). Esto debería significar que en una pantalla más pequeña no vemos la extrema izquierda ni la derecha de la imagen.

Intenté contener la imagen en un div y agregar

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

Pero no funciona

¡Gracias!

Answer 1

Aparentemente, las soluciones mencionadas anteriormente no me funcionaron (no sé por qué?) Pero encontré otra solución usando javascript.

Básicamente, este es un método más tedioso pero también funciona. Utiliza jQuery para establecer la altura del carrusel al ancho dividido por una determinada relación de aspecto.

Aquí está mi código:

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



    }

Parece que me funciona bien.

Espero que funcione para usted también.

Puede establecer la relación de aspecto usted mismo o usar otro método. Primero, configure el ancho y el alto de la ventana para una dimensión de vista donde la imagen aparece bien formateada. Consulta el ancho y alto, y calcula la relación. Regrese la ventana al ancho y alto original. El usuario no notaría el cambio, pero las dimensiones se registrarían.

Answer 2

Como otros han mencionado, css3 funciona muy bien para esto. Utilicé ancho completo, altura fija para el contenedor, luego reduje la proporción de aspecto de la imagen con ''cobertura'' y luego arrojé el desbordamiento:

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

Answer 3

Creo que es mejor manejarlo con el atributo de object-fit CSS3.

Si tiene una imagen con ancho y alto fijos y aún si desea conservar la relación de aspecto, puede usar object-fit:contain; . Mantendrá la relación con la altura y el ancho dados.

Por ejemplo :

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

Puede encontrar más detalles aquí: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Espero que esto sea útil para alguien.

Answer 4

El problema radica aquí, en el arranque de CSS:

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

Después de establecer max-width: 100%; la imagen no será más grande que la ventana gráfica. Debe anular ese comportamiento en su CSS:

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

Tenga en cuenta el max-width: none; agregado en la parte inferior. Este es el valor predeterminado de ancho máximo y el límite.

Here''s tu violín actualizado.

Answer 5

Elimine la etiqueta img dentro del elemento del carrusel y agregue un fondo. De esta manera puede usar la propiedad de portada 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 6

Este código finalmente funcionó para mí:

.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 7

Pude lograr esto comentando la línea de altura de la línea carrusel.css como se muestra a continuación:

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

Answer 8

para mantener la relación de aspecto y la cobertura total de carrusel div:

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