CSS: Comment puis-je définir la taille de l'image par rapport à la hauteur du parent?

Question

Je suis en train de chercher comment redimensionner une image tout en conservant son ratio largeur/hauteur, mais en la redimensionnant jusqu'à ce que la hauteur de l'image corresponde à la hauteur de la div conteneur. J'ai ces images qui sont assez grandes et longues (captures d'écran), et je veux les mettre dans une div de largeur 200px et hauteur 180px pour les afficher sans redimensionner les images manuellement. Pour que cela soit beau, les côtés de l'image doivent déborder et être cachés par la div conteneur. Voici ce que j'ai jusqu'à présent :

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

HTML

CSS

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

Comme vous pouvez le voir, il y a une couleur grise qui apparaît sur le conteneur parent de l'image, ce qui ne devrait pas être visible du tout. Pour que ce conteneur soit complètement rempli, la largeur doit déborder également des deux côtés. Est-ce possible ? Est-il également possible de prendre en compte une image qui est trop haute ?

Answer 1

Pour moi, la manière la plus facile de le faire sans utiliser la position absolute, traduis.

le CSS devrait ressembler à ceci :

.img-container {
 height:100px;
 width:100px;
 overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}

Answer 2

Si tout ce que vous essayez de faire est de remplir la division, cela pourrait aider quelqu'un d'autre, si le rapport hauteur/largeur n'est pas important, est responsive.

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}