tamaño - mostrar imagen en html

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

Question

Estoy usando una etiqueta img de HTML para mostrar una foto en nuestra aplicación. He configurado tanto su atributo de alto y ancho como 64. Necesito mostrar cualquier resolución de imagen (por ejemplo, 256x256, 1024x768, 500x400, 205x246, etc.) como 64x64. Pero al establecer los atributos de alto y ancho de una etiqueta img en 64, no mantiene la relación de aspecto, por lo que la imagen se ve distorsionada.

Para su referencia, mi código exacto es:

<img src="Runtime Path to photo" border="1" height="64" width="64">

Answer 1

¿Por qué no utiliza un archivo CSS separado para mantener la altura y el ancho de la imagen que desea visualizar? De esa manera, puede proporcionar el ancho y la altura necesarios.

p.ej:

       image {
       width: 64px;
       height: 64px;
       }

Answer 2

Envuelva la imagen en un div con dimensiones de 64x64 y establezca el width: inherit la imagen:

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

Answer 3

Establezca el width y el height de las imágenes en auto , pero limite tanto max-width max-height .

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

Fiddle

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

Answer 4

Ninguno de los métodos enumerados escala la imagen al tamaño más grande posible que cabe en una caja sin perder 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>

Answer 5

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

.widthSet {
    max-width: 100px;
}

.heightSet {
    max-height: 100px;
}

<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />

Answer 6

aquí está el ejemplo uno

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>

Answer 7

<img src="Runtime Path to photo" style="border: 1px solid #000; max-width:64px; max-height:64px;">