web-dev-qa-db-fra.com

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

J'essaie de comprendre comment redimensionner une image de sorte qu'elle conserve le rapport largeur/hauteur, mais qu'elle soit redimensionnée jusqu'à ce que la hauteur de l'image corresponde à la hauteur du div qui le contient. J'ai ces images qui sont assez grandes et longues (captures d'écran), et je veux les mettre dans une largeur de 200px, 180px de hauteur pour l'affichage et sans redimensionnement manuel des images. Pour que cela ait l'air bien, les côtés de l'image doivent déborder et être cachés avec le div qui les contient. Voici ce que j'ai jusqu'à présent:

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

Comme vous pouvez le constater, le conteneur parent d'images contient une couleur grise qui ne doit absolument pas être affichée. Pour que ce conteneur soit complètement rempli, la largeur doit être débordée de manière égale des deux côtés. Est-ce possible? Est-il également possible de prendre en compte une image trop grande?

htmlcssimagecss3
62
Jon McPherson

Réponse originale:

Si vous êtes prêt à opter pour CSS3, vous pouvez utiliser la propriété de traduction CSS3. Redimensionnez en fonction de ce qui est plus gros. Si votre hauteur est plus grande et votre largeur inférieure à celle du conteneur, la largeur sera étirée à 100% et la hauteur sera ajustée des deux côtés. Même chose pour une plus grande largeur aussi.

Votre besoin, 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>

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

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

Explication

DIV est réglé sur la position relative. Cela signifie que tous les éléments enfants obtiendront les coordonnées de départ (origines) du début de cette DIV.

L'image est définie en tant qu'élément BLOCK, min-width/height les deux, définis à 100%, permettent de redimensionner l'image, quelle que soit sa taille, de sorte qu'elle soit égale à 100% minimum de son parent. min est la clé. Si par min-height, la hauteur de l'image dépasse la hauteur du parent, aucun problème. Il cherchera si min-width et essaiera de régler la hauteur minimale à 100% des parents. Les deux va vice-versa. Cela garantit qu'il n'y a pas de lacunes autour de la division mais que l'image est toujours un peu plus grande et est rognée par overflow:hidden;

Maintenant, image est réglé sur une position absolute avec left:50% et top:50%. Moyens Poussez l'image à 50% en partant du haut et de gauche en vous assurant que l'origine est issue de DIV. Les unités Left/Top sont mesurées à partir du parent.

Moment magique:

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

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

Par exemple. Si la taille de l'image était 200px × 150px, transform:translate(-50%, -50%) sera calculé pour traduire (-100px, -75px). % unité aide lorsque nous avons différentes tailles d'image.

Ceci est juste un moyen délicat de déterminer le centroïde de l'image et le DIV parent et de les faire correspondre.

Toutes mes excuses pour avoir pris trop de temps pour expliquer!

Ressources pour en savoir plus:

66
Shekhar K. Sharma

Changer votre code:

a.image_container img {
    width: 100%;
}

Pour ça:

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/

32
Jacques ジャック

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

img{
  max-width:100%;
}
11
UniCoder