pantalla - Escala de imagen CSS para encajar dentro del área no distorsionar

img html

Question

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

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

¿Algunas ideas?

Answer 1

Cuando dices "encaja dentro de esta área" con el resto oculto, siento que quieres que la imagen no se reduzca en absoluto y básicamente recorte cualquier exceso.

Puede que esté interpretando que la 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 2

Deberías intentar usar esto:

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

Edición: Parece que IE6 no admite las propiedades de ancho máximo y altura máxima. Sin embargo, puede implementar la solución proporcionada aquí: max-width, max-height para IE6

Answer 3

Esto funcionó para mí:

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

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

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

Answer 4

Esto no funcionará en IE6 (como lo requiere el OP), pero para lograrlo, puede lograr el efecto requerido en los navegadores más nuevos utilizando el background-size:cover de background-size:cover de CSS3 background-size:cover y configure la imagen como una imagen de fondo centrada. Al igual que:

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