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

132

Estoy usando una etiqueta img de HTML para mostrar una foto en nuestra aplicación. He establecido su atributo de altura y ancho en 64. Necesito mostrar cualquier resolución de imagen (por ejemplo, 256x256, 1024x768, 500x400, 205x246, etc.) como 64x64. Pero al establecer los atributos de altura y anchura 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="Runtime Path to photo" border="1" height="64" width="64">
html css sunil kumar
fuente
posible duplicado de HTML / IE: estirar la imagen para ajustarla, preservar la relación de aspecto
Jonathon Reinhart
Chridam, es mucho tiempo cuando hice esta pregunta. Dejé la compañía donde trabajaba para este problema. No pude probar las soluciones sugeridas porque estaba trabajando en otras prioridades para cumplir con los plazos en ese momento. No pude tener la oportunidad de avanzar más en ello.
sunil kumar

Respuestas:

134

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

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<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" />
Expandir fragmento

Nabo
fuente
14
... pero ¿qué pasa si quieres arreglar tanto la altura como el ancho?
fatuhoku
77
Esto no tiene sentido para aplicaciones dinámicas. No se sabe si el ancho o la altura estarán a 64px, ya que depende de la proporción de la imagen. ¿Por qué es esta la respuesta votada?
Koenigsberg
@ Mär Esta pregunta se refería a imágenes de ancho y / o altura fija. La capacidad de respuesta no era un requisito de la pregunta.
Nabo
3
El tamaño es fijo, la relación de aspecto no lo es, ya que la pregunta era específicamente sobre cualquier imagen de cualquier resolución. Incluyendo resoluciones menores de 64x64.
Koenigsberg
66

aquí está la 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>
Expandir fragmento

AKHIL P
fuente
8
Solo una nota para las personas que desean utilizar esta solución: el ajuste de objetos no es muy compatible con los navegadores. IE o Edge no lo admiten en absoluto. Fuente: caniuse.com/#feat=object-fit
Sean Dawson
2
Ahora compatible con Edge 16+, consulte la tabla: w3schools.com/css/css3_object-fit.asp
Eddy R.
44

Establecer widthy heightde las imágenes a auto, pero limitar ambas max-widthy 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 .

Ilya Streltsyn
fuente
3
No escalará más allá del tamaño original, solo por debajo del tamaño original.
Koenigsberg
40 
<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">
Lucio Fonseca
fuente
2
Esta es la solución correcta, ya que sigue siendo independiente de la orientación de la imagen. La solución de 3rror404 requiere que sepa si la imagen es más ancha que alta o viceversa.
devios1
2
También establecer widthy heightpara auto.
Mahmoodvcs
Solución adecuada para restringir tanto la altura como el ancho.
Pavan Kumar
1
Esto restringirá adecuadamente una imagen , pero no se escalará más allá de su tamaño original. Aunque no es seguro desde el primer post cuál de los dos quería el OP.
Koenigsberg
14

Ninguno de los métodos enumerados escala la imagen al tamaño más grande posible que cabe 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>
Cobarde anónimo
fuente
2
Si. Úselo style="background: url('_'); background-size: cover width:_px height:_px"para la <img>etiqueta.
Ujjwal Singh
3
Gracias, @UjjwalSingh. De hecho, necesitamos coverno containcon el fin de maximizar el tamaño de la imagen a la más grande posible. containconduce a "letterboxing".
Ortwin Gentz
4

Use el object-fit: containatributo en css de html img.

Ankit Kumar Verma
fuente
3

Envuelva la imagen en una divcon dimensiones de 64x64 y configure width: inheritla imagen: 

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

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

p.ej: 

       image {
       width: 64px;
       height: 64px;
       }
Sahan De Silva
fuente
1

Prueba esto:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

Agregar object-fit = "cover" forzará a la imagen a ocupar el espacio sin perder la relación de aspecto.

Nick friesen
fuente