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

Réponse originale:

Si vous êtes prêt à opter pour CSS3, vous pouvez utiliser la propriété de translation css3. Redimensionner en fonction de ce qui est plus grand. Si votre hauteur est plus grande et la largeur est plus petite que le conteneur, la largeur sera étirée à 100% et la hauteur sera rognée des deux côtés. Le même principe s'applique également pour une largeur plus grande.

Votre besoin, HTML :

Et 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%);
}

Voilà! Fonctionne : http://jsfiddle.net/shekhardesigner/aYrhG/

Explication

Le DIV est positionné en relative. Cela signifie que tous les éléments enfants recevront les coordonnées de départ (origines) à partir desquelles ce DIV commence.

L'image est définie comme un élément BLOC, min-width/height tous les deux réglés sur 100%, ce qui signifie que pour redimensionner l'image indépendamment de sa taille pour qu'elle soit au minimum de 100% de son parent. min est le mot clé. Si en min-hauteur, la hauteur de l'image dépasse la hauteur du parent, pas de problème. Il cherchera si la min-largeur et essayera de définir la hauteur minimale à 100% des parents. Les deux vont dans les deux sens. Cela garantit qu'il n'y a pas d'espaces autour de la div mais que l'image est toujours un peu plus grande et est rognée par overflow:hidden;

Maintenant, image, celle-ci est positionnée en absolute avec left:50% et top:50%. Cela signifie pousser l'image de 50% vers le haut et la gauche en veillant à ce que l'origine soit prise depuis le DIV. Les unités left/top sont mesurées à partir du parent.

Le moment magique:

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

Ensuite, cette fonction translate de la propriété transform de CSS3 déplace/repositionne un élément en question. Cette propriété traite l'élément appliqué donc les valeurs (x, y) OU (-50%, -50%) signifient déplacer l'image vers la gauche négative de 50% de sa taille d'image et la déplacer vers le haut négatif de 50% de sa taille d'image.

Par exemple, si la taille de l'image était de 200px × 150px, transform:translate(-50%, -50%) calculera translate(-100px, -75px). L'unité % est utile lorsque nous avons diverses tailles d'images.

Il s'agit simplement d'une astuce pour trouver le centre de l'image et du DIV parent et les faire correspondre.

Désolé pour avoir pris trop de temps pour expliquer!

Ressources pour en savoir plus:

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

Answer 2

Changez votre code:

a.image_container img {
    width: auto; // pour maintenir le rapport hauteur/largeur. Vous pouvez utiliser 100% si cela ne vous importe pas
    height: 100%;
}

Vers ceci:

a.image_container img {
    width: auto; // pour maintenir le rapport hauteur/largeur. Vous pouvez utiliser 100% si cela ne vous importe pas
    height: 100%;
}

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

Answer 3

Utilisez la propriété max-width de CSS, comme ceci :

img{
  max-width:100%;
}

Answer 4

Vous pouvez utiliser flex box pour cela.. cela résoudra votre problème

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

Answer 5

Si vous suivez la réponse de Shekhar K. Sharma, et cela fonctionne presque, vous devez également ajouter à votre code height: 1px; ou width: 1px; pour que cela fonctionne correctement.