html - tamaño - hacer que una imagen se adapte a un div

CSS: ¿Cómo puedo establecer el tamaño de la imagen en relación con la altura de los padres?

Question

Intento descubrir cómo volver a clasificar según el tamaño una imagen para mantener su relación de ancho a alto, pero se vuelve a clasificar según el tamaño hasta que la altura de la imagen coincida con la altura del div que contiene. Tengo estas imágenes que son bastante grandes y largas (capturas de pantalla), y quiero ponerlas en un ancho de 200px, altura de 180px para mostrar y sin cambiar el tamaño de las imágenes manualmente. Para que se vea bien, los lados de la imagen deben desbordarse y ocultarse con el div que lo contiene. Esto es lo que tengo hasta ahora:

http://jsfiddle.net/f9krj/2/

HTML

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

CSS

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

Como puede ver, hay un color gris que se muestra en el contenedor principal de imágenes que no debe mostrarse en absoluto. Para que ese contenedor se llene por completo, el ancho debe desbordarse por igual en ambos lados. es posible? ¿También es posible dar cuenta de una imagen que también es demasiado alta?

Answer 1

Respuesta Original:

Si está listo para optar por CSS3, puede usar la propiedad de traducción css3. Cambiar el tamaño según lo que sea más grande. Si su altura es más grande y el ancho es más pequeño que el contenedor, el ancho se ampliará al 100% y la altura se recortará desde ambos lados. Lo mismo vale para un ancho mayor también.

Su necesidad, HTML:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

Y CSS:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

Voila! Trabajando: http://jsfiddle.net/shekhardesigner/aYrhG/

Explicación

DIV se establece en la posición relative . Esto significa que todos los elementos secundarios obtendrán las coordenadas iniciales (orígenes) desde donde comienza este DIV.

La imagen se establece como un elemento BLOQUE, min-width/height ambos configurados al 100%, significa cambiar el tamaño de la imagen, sin importar su tamaño, para que sea el mínimo del 100% de su elemento principal. min es la clave. Si por min-altura, la altura de la imagen excede la altura del padre, no hay problema. Buscará si el ancho mínimo e intentará establecer la altura mínima para que sea el 100% de los padres. Ambos van al revés. Esto asegura que no haya lagunas alrededor del div pero la imagen siempre es un poco más grande y se recorta por el overflow:hidden;

Ahora image , esto se establece en una posición absolute con la left:50% y top:50% . Significa empujar la imagen al 50% desde la parte superior e izquierda asegurándose de que el origen se toma de DIV. Las unidades izquierda / arriba se miden desde el padre.

Momento magico:

transform: translate(-50%, -50%);

Ahora, esta función de translate de la propiedad de transform CSS3 mueve / reposiciona un elemento en cuestión. Esta propiedad trata con el elemento aplicado, por lo tanto los valores (x, y) O (-50%, -50%) significa mover la imagen negativa dejada por el 50% del tamaño de la imagen y moverse a la parte superior negativa por el 50% del tamaño de la imagen .

P.ej. si el tamaño de la imagen era 200px × 150px, transform:translate(-50%, -50%) se calculará para traducir (-100px, -75px). % de unidad ayuda cuando tenemos varios tamaños de imagen.

Esta es solo una forma complicada de calcular el centroide de la imagen y el DIV parental y hacerlos coincidir.

Disculpas por tomar demasiado tiempo para explicar!

Recursos para leer más:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

Answer 2

Cambia tu código:

a.image_container img {
    width: 100%;
}

A esto:

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don''t care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

Answer 3

Utilice la propiedad max-width de CSS, como esta:

img{
  max-width:100%;
}