¿Cómo se estira una imagen para llenar un <div> manteniendo la relación de aspecto de la imagen?
Necesito hacer que esta imagen se estire al máximo tamaño posible sin desbordarla <div>ni sesgar la imagen.
No puedo predecir la relación de aspecto de la imagen, por lo que no hay forma de saber si usar:
<img src="url" style="width: 100%;">o
<img src="url" style="height: 100%;">No puedo usar ambos (es decir, estilo="ancho: 100%; alto: 100%;") porque eso estirará la imagen para que se ajuste al archivo <div>.
Tiene <div>un tamaño establecido por porcentaje de la pantalla, que además es impredecible.
Actualización 2016:
El navegador moderno se comporta mucho mejor. Todo lo que debes hacer es establecer el ancho de la imagen al 100% ( demostración )
.container img {
width: 100%;
}
Como no conoces la relación de aspecto, tendrás que utilizar algunas secuencias de comandos. Así es como lo haría con jQuery ( demostración ):
CSS
.container {
width: 40%;
height: 40%;
background: #444;
margin: 0 auto;
}
.container img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.container img.tall {
max-height: 100%;
max-width: 100%;
width: auto;
}
HTML
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
<img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>
Guion
$(window).load(function(){
$('.container').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})
Hay una manera mucho más sencilla de hacer esto usando solo CSSy HTML:
HTML:
<div
class="fill"
style="background-image: url('path/to/image.jpg');">
</div>
CSS:
.fill {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
Esto colocará su imagen como fondo y la estirará para que se ajuste al divtamaño sin distorsión.
No es una solución perfecta, pero este CSS podría ayudar. El zoom es lo que hace que este código funcione y, en teoría, el factor debería ser infinito para funcionar idealmente con imágenes pequeñas, pero 2, 4 u 8 funcionan bien en la mayoría de los casos.
#myImage {
zoom: 2; //increase if you have very small images
display: block;
margin: auto;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
