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

Estoy tratando de averiguar cómo cambiar el tamaño de una imagen para que mantenga la proporción de ancho a alto, pero se cambia de tamaño hasta que la altura de la imagen coincida con la altura del div que la contiene. Tengo estas imágenes que son bastante grandes y largas (capturas de pantalla), y quiero ponerlas en un div de 200px de ancho, 180px de alto para mostrarlas y sin cambiar el tamaño de las imágenes manualmente. Para que esto se vea bien, los lados de la imagen deben desbordarse y ocultarse con el div contenedor. 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, se muestra un color gris en el contenedor principal de las imágenes que no debería mostrarse en absoluto. Para que ese contenedor se llene completamente, el ancho debe desbordarse por igual en ambos lados. es posible? ¿También es posible tener en cuenta una imagen que también es demasiado alta?

Respuesta original:

Si está listo para optar por CSS3, puede usar la propiedad de traducción css3. Cambie el tamaño según lo que sea más grande. Si su altura es mayor y el ancho es menor que el del contenedor, el ancho se estirará al 100% y la altura se recortará de ambos lados. Lo mismo ocurre con un ancho mayor.

Tu 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 está en la relativeposición. 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/heightambos 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 padre. mines la llave. Si por altura mínima, la altura de la imagen excedió la altura del padre, no hay problema. Buscará si min-width 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 espacios alrededor del div, pero la imagen siempre es un poco más grande y se recorta poroverflow:hidden;

Ahora image, esto se establece en una absoluteposición con 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 / superior se miden desde el padre.

Momento magico:

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

Ahora, esta translatefunción de la transformpropiedad CSS3 mueve / reposiciona un elemento en cuestión. Esta propiedad se ocupa del elemento aplicado, por lo tanto, los valores (x, y) O (-50%, -50%) significan mover el negativo de la imagen a la izquierda en un 50% del tamaño de la imagen y mover a la parte superior del negativo en un 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). % unit ayuda cuando tenemos varios tamaños de imagen.

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

¡Disculpas por tardar demasiado en 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/

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/

Utilice la max-widthpropiedad de CSS, así:

img{
  max-width:100%;
}

Si toma Shekhar K. Sharma de la respuesta , y casi funciona, también debe agregar esto height: 1px;o esto width: 1px;para que funcione.

puedes usar la caja flexible para eso ... esto resolverá tu problema

.image-parent 
{
     height:33px; 
     display:flex; 
}