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'');
}