Estoy trabajando con imágenes y me encontré con un problema con las relaciones de aspecto.

<img src="big_image.jpg" width="900" height="600" alt="" />

Como puede ver, heighty widthya están especificados. Agregué la regla CSS para las imágenes:

img {
  max-width:500px;
}

Pero para big_image.jpg, recibo width=500y height=600. Cómo puedo configurar las imágenes para cambiar su tamaño, manteniendo sus relaciones de aspecto.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Esto hará que la imagen se reduzca si es demasiado grande para el área especificada (como inconveniente, no agrandará la imagen).

He luchado bastante con este problema, y ​​finalmente llegué a esta solución simple:

object-fit: cover;
width: 100%;
height: 250px;

Puede ajustar el ancho y la altura para satisfacer sus necesidades, y la propiedad de ajuste de objetos hará el recorte por usted.

Salud.

Las soluciones a continuación permitirán ampliar y reducir la imagen , dependiendo del ancho del cuadro principal.

Todas las imágenes tienen un contenedor principal con un ancho fijo solo con fines de demostración . En producción, este será el ancho de la caja principal.

Mejores prácticas (2018):

Esta solución le dice al navegador que renderice la imagen con el ancho máximo disponible y ajuste la altura como un porcentaje de ese ancho.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Solución más elegante:

Con la solución más elegante, podrá recortar la imagen independientemente de su tamaño y agregar un color de fondo para compensar el recorte.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Para la línea que especifica el relleno, debe calcular la relación de aspecto de la imagen, por ejemplo:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Entonces, el relleno superior = 34.37%.

La propiedad de tamaño de fondo es, por ejemplo,> = 9 solamente, pero si eso está bien con usted, puede usar un div con background-imagey establecer background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Ahora puede establecer el tamaño de su div en lo que desee y no solo la imagen mantendrá su relación de aspecto, sino que también se centralizará vertical y horizontalmente dentro del div. Simplemente no olvide establecer los tamaños en el CSS ya que los divs no tienen el atributo ancho / alto en la etiqueta.

Este enfoque es diferente a la respuesta de setecs, usando esto el área de la imagen será constante y definida por usted (dejando espacios vacíos, ya sea horizontal o verticalmente, dependiendo del tamaño div y la relación de aspecto de la imagen), mientras que la respuesta de setecs le dará un cuadro que exactamente tamaño de la imagen a escala (sin espacios vacíos).

Editar: de acuerdo con la documentación de tamaño de fondo de MDN , puede simular la propiedad de tamaño de fondo en IE8 utilizando una declaración de filtro patentada:

Aunque Internet Explorer 8 no admite la propiedad de tamaño de fondo, es posible emular algunas de sus funciones utilizando la función no estándar -ms-filter:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Muy similar a algunas respuestas aquí, pero en mi caso tenía imágenes que a veces eran más altas, a veces más grandes.

Este estilo funcionó de maravilla para asegurarse de que todas las imágenes usen todo el espacio disponible, mantengan la proporción y no los cortes:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Elimine la propiedad "altura".

<img src="big_image.jpg" width="900" alt=""/>

Al especificar ambos, está cambiando la relación de aspecto de la imagen. Solo configurando uno cambiará el tamaño pero conservará la relación de aspecto.

Opcionalmente, para restringir sobredimensionamientos:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Simplemente agregue esto a su CSS, se reducirá y expandirá automáticamente manteniendo la proporción original.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

No hay una forma estándar de preservar la relación de aspecto para imágenes con width, heighty max-widthespecificadas juntas.

Por lo tanto, nos vemos obligados a especificar widthy heightevitar "saltos" en la página durante la carga de imágenes, o para usar max-widthy no especificar dimensiones para las imágenes.

Especificar solo width(sin height) generalmente no tiene mucho sentido, pero puede intentar anular el heightatributo HTML agregando una regla comoIMG {height: auto; } en su hoja de estilo.

Ver también el error relacionado con Firefox 392261 .

Aquí hay una solución:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Esto asegurará que la imagen siempre cubra a todo el padre (escalando hacia arriba y hacia abajo) y mantenga la misma relación de aspecto.

Establezca la clase CSS de su etiqueta de contenedor de imagen en image-class:

<div class="image-full"></div>

y agrega esto a tu hoja de estilo CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Para mantener una imagen receptiva y al mismo tiempo hacer que la imagen tenga una determinada relación de aspecto, puede hacer lo siguiente:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

Y SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Esto se puede utilizar para aplicar una determinada relación de aspecto, independientemente del tamaño de la imagen que carguen los autores.

Gracias a @Kseso en http://codepen.io/Kseso/pen/bfdhg . Consulte esta URL para obtener más proporciones y un ejemplo de trabajo.

Para forzar una imagen que se ajuste a un tamaño exacto, no necesita escribir demasiados códigos. Es tan simple

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Aquí está la respuesta si desea poner una imagen con un porcentaje fijo de ancho , pero no píxeles fijos de ancho .

Y esto será útil cuando se trata de diferentes tamaños de pantalla .

Los trucos son

1. Utilizando padding-toppara establecer la altura desde el ancho.
2. Utilizando position: absolutepara poner la imagen en el espacio de relleno.
3. Utilizando max-height and max-widthpara asegurarse de que la imagen no superará el elemento principal.
4. usando display:block and margin: autopara centrar la imagen.

También he comentado la mayoría de los trucos dentro del violín.

También encuentro otras formas de hacer que esto suceda. No habrá una imagen real en html, por lo que personalmente busco la respuesta principal cuando necesito el elemento "img" en html.

CSS simple utilizando el fondo http://jsfiddle.net/4660s79h/2/

imagen de fondo con la palabra en la parte superior http://jsfiddle.net/4660s79h/1/

El concepto para utilizar la posición absoluta es de aquí http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Puedes usar esto:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Puedes crear un div como este:

<div class="image" style="background-image:url('/to/your/image')"></div>

Y usa este CSS para darle estilo:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Sugeriría un enfoque receptivo, la mejor práctica sería usar las unidades de Viewport y los atributos min / max de la siguiente manera:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Esto hará que la imagen se reduzca si es demasiado grande para el área especificada (como inconveniente, no agrandará la imagen).

La solución de setec está bien para "Shrink to Fit" en modo automático. Pero, para EXPANDIR de manera óptima para que se ajuste al modo 'automático', primero debe colocar la imagen recibida en una identificación temporal. Compruebe si se puede expandir en altura o en ancho (dependiendo de su relación de aspecto v / s la relación de aspecto de su bloque de pantalla),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Este enfoque es útil cuando las imágenes recibidas son más pequeñas que el cuadro de visualización. Debe guardarlos en su servidor en tamaño original pequeño en lugar de su versión ampliada para llenar su caja de visualización más grande para ahorrar en tamaño y ancho de banda.

¿Qué tal usar un pseudo elemento para la alineación vertical? Este código menos es para un carrusel, pero supongo que funciona en todos los contenedores de tamaño fijo. Mantendrá la relación de aspecto e insertará @ barras gris oscuro en la parte superior / inferior o izquierda / escritura para la dimensión más corta. Mientras tanto, la imagen está centrada horizontalmente por la alineación de texto y verticalmente por el pseudo elemento.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Presentación a pantalla completa:

img[data-attribute] {height: 100vh;}

Tenga en cuenta que si la altura del puerto de vista es mayor que la imagen, la imagen se degradará naturalmente en relación con la diferencia.

Creo, finalmente, que esta es la mejor solución, fácil y simple :

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}