¿Cómo forzar el cambio de tamaño de la imagen y mantener la relación de aspecto?

Estoy trabajando con imágenes y tuve un problema con las relaciones de aspecto.

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

Como puedes ver, heightya widthestán especificados. Agregué una regla CSS para imágenes:

img {
    max-width: 500px;
}

Pero para big_image.jpg, recibo width=500y height=600. ¿Cómo configuro las imágenes para que se les cambie el tamaño, manteniendo sus relaciones de aspecto?

Oct 21 '12 01:10 moonvader

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="https://i.stack.imgur.com/aEEkn.png">

Expandir fragmento

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

Jun 19 '2013 06:06 setec

Aquí tienes una solución:

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

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

Más información sobre los posibles valores para la object-fitpropiedad y una tabla de compatibilidad están disponibles aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Aug 19 '2016 12:08 Théo T. Carranza

Las siguientes soluciones permitirán ampliar y reducir la imagen , según el ancho del cuadro principal.

Todas las imágenes tienen un contenedor principal con un ancho fijo sólo con fines de demostración . En producción, este será el ancho del cuadro principal.

Mejores prácticas (2018):

Esta solución le dice al navegador que muestre 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://place-hold.it/400x400">
</div>

Expandir fragmento

Solución más elegante:

Con la solución más sofisticada, podrás 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://place-hold.it/640x220">
  </div>
</div>

Expandir fragmento

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, relleno superior = 34,37%.

May 15 '2014 10:05 Aternus