Solución:
No aplique un ancho o alto explícito a la etiqueta de la imagen. En su lugar, dale:
max-width:100%;
max-height:100%;
También, height: auto; si desea especificar solo un ancho.
Ejemplo: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>ajuste de objeto
Resulta que hay otra forma de hacer esto.
<img style="height: 100%; width: 100%; object-fit: contain"/>
hará el trabajo. Son cosas de CSS 3.
Violín: http://jsfiddle.net/mbHB4/7364/
Actualmente no hay forma de hacer esto correctamente de una manera determinista, con imágenes de tamaño fijo como archivos JPEG o PNG.
Para cambiar el tamaño de una imagen proporcionalmente, debe configurar cualquiera la altura o el ancho a “100%”, pero no ambos. Si establece ambos en “100%”, su imagen se estirará.
La elección de la altura o el ancho depende de las dimensiones de la imagen y el contenedor:
- Si la imagen y el contenedor tienen “forma de retrato” o “forma de paisaje” (más altos que anchos o más anchos que altos, respectivamente), no importa qué altura o ancho sean “% 100”. .
- Si su imagen es vertical y su contenedor es horizontal, debe configurar
height="100%"en la imagen. - Si su imagen es horizontal y su contenedor es vertical, debe configurar
width="100%"en la imagen.
Si su imagen es un SVG, que es un formato de imagen vectorial de tamaño variable, puede hacer que la expansión para que se ajuste al contenedor ocurra automáticamente.
Solo debe asegurarse de que el archivo SVG no tenga ninguna de estas propiedades configuradas en el <svg> etiqueta:
height
width
viewbox
La mayoría de los programas de dibujo vectorial establecerán estas propiedades al exportar un archivo SVG, por lo que tendrá que editar manualmente su archivo cada vez que exporte, o escribir un script para hacerlo.