Escalado de imagen CSS para que quepa en el área no distorsione

Question

¿Hay alguna manera con CSS o de otra manera de hacer que una imagen se adapte a un área? Digamos que tengo varias imágenes de diferentes tamaños y quiero que todas quepan dentro de un div de 150px por 100px. No quiero escalar las imágenes, ya que algunas pueden ser altas y otras estrechas, simplemente quiero que quepan dentro de esta área y el resto oculto.

Pensé en usar overflow:hidden pero parece que no está oculto en IE6.

¿Alguna idea?

maravilloso

Answer 1

Usted debe tratar de usar esto:

img{ 
    width: auto; 
    max-width: 150px; 
    height: auto; 
    max-height: 100px; 
} 

Editar: Parece que IE6 no soporta max-width y max-height. Sin embargo, puede implementar la solución dada aquí: max-width, max-height for IE6

Answer 2

Cuando diga "encajar dentro de esta área" con el resto oculto, siento que desea que la imagen no se reduzca y básicamente elimine cualquier exceso.

Podría interpretar que su pregunta es incorrecta, pero intente esto y vea si produce el efecto que está buscando.

.img-holder { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.img-holder img { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="img-holder"> 
 
    <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" /> 
 
</div>

Answer 3

Esto no funcionará en IE6 (como es requerido por la OP), pero para lo completo que puede lograr el efecto deseado en los nuevos navegadores utilizando CSS3 de background-size:cover y ajuste de la imagen como un centrado imagen de fondo. De este modo:

div { 
    width:150px; 
    height:100px; 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-image:url('somepic.jpg'); 
} 

Answer 4

Esto funcionó para mí:

img.perfect-fit { 
    width: auto; 
    height: auto; 
    min-width: 100%; 
    min-height: 100%; 
} 

Se trata de hacer un "ajuste perfecto" del contenedor, estirándose para adaptarse a los límites mientras se mantiene la proporción de la imagen. No lo he probado con IE6.

jsFiddle:http://jsfiddle.net/4zudggou/