Cómo mantener la relación de aspecto usando la etiqueta HTML IMG

Question 1

Estoy usando una etiqueta img de HTML para mostrar una foto en nuestra aplicación. Establecí su atributo de alto y ancho en 64. Necesito mostrar cualquier resolución de imagen (por ejemplo, 256×256, 1024×768, 500×400, 205×246, etc.) como 64×64. Pero al establecer los atributos de alto y ancho de una etiqueta img en 64, no se mantiene la relación de aspecto, por lo que la imagen se ve distorsionada.

Para su referencia, mi código exacto es:

<img src="https://stackoverflow.com/questions/12912048/Runtime Path to photo" border="1" height="64" width="64">

Question 2

No establezca la altura Y el ancho. Use uno u otro y se mantendrá la relación de aspecto correcta.

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}

<img src="https://picsum.photos/200/250?grayscale" />

<img src="https://picsum.photos/200/250?grayscale" width="64" />

<img src="https://picsum.photos/200/250?grayscale" height="64" />

<img src="https://picsum.photos/200/250?grayscale" class="widthSet" />

<img src="https://picsum.photos/200/250?grayscale" class="heightSet" />

Otra opción que le da más flexibilidad es usar object-fit. Esto permite establecer dimensiones fijas para el img mientras que la imagen en sí se puede presentar de varias maneras diferentes dentro de el área definida.

img {
    width: 64px;
    height: 64px;
    border: 1px solid hotpink;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.scale-down {
  object-fit: scale-down;
}

<img src="https://picsum.photos/200/500?grayscale" class="fill" />

<img src="https://picsum.photos/200/500?grayscale" class="contain" />

<img src="https://picsum.photos/200/500?grayscale" class="cover" />

<img src="https://picsum.photos/200/500?grayscale" class="scale-down" />

Question 3

aqui esta el de muestra

div{
   width: 200px;
   height:200px;
   border:solid
 }

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

<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

Question 4

Establecer width y height de las imágenes a autopero limite ambos max-width y max-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

Violín

Si desea mostrar imágenes de tamaño arbitrario en los “marcos” de 64x64px, puede usar envoltorios de bloques en línea y posicionamiento para ellos, como en este violín.

Question 5

<img src="https://stackoverflow.com/questions/12912048/Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

Question 6

Usar object-fit: contain en css del elemento html img.

ex:

img {
    ...
    object-fit: contain
    ...
}

Question 7

Ninguno de los métodos enumerados escala la imagen al tamaño más grande posible que quepa en un cuadro mientras conserva la relación de aspecto deseada.

Esto no se puede hacer con la etiqueta IMG (al menos no sin un poco de JavaScript), pero se puede hacer de la siguiente manera:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

Question 8

Hay una nueva propiedad CSS aspect-ratio. Establece una relación de aspecto preferida para la caja, que se utilizará en el cálculo de tamaños automáticos y algunas otras funciones de diseño.

img {
  width: 100%;
  aspect-ratio: 16/9;
}

Es compatible con todos los navegadores bien distribuidos.
Enlace MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Y https://web.dev/relación-de-aspecto/ contiene buenos ejemplos del uso de esta propiedad

¿Ha sido útil esta solución?