web-dev-qa-db-fra.com

Contrôle de la taille d'une image dans une présentation de grille CSS

J'ai une disposition en grille CSS avec un tas de zones et un conteneur de photos.

Je ne sais pas comment:

  1. contrôler la taille de la photo, de sorte qu'elle soit contenue dans la zone de la grille

  2. conservez la largeur de la photo à 100% (donc égale à son conteneur) et ajustez la hauteur du conteneur pour l'adapter à la photo. Fondamentalement, lorsque la fenêtre devient plus petite, la largeur de la photo devient plus petite, de même que la hauteur - tirant la balise, l'album et la rotation des éléments vers le haut.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas: 
    "info    photo photo photo   photo" 
    "comment photo photo photo   photo" 
    "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
}

.photo>img {
  object-fit: cover;
  width: 100%
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}
<div class="container">
  <div class="photo">
    <img src="http://wallpaper-gallery.net/images/image/image-13.jpg" />
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>
htmlcsscss3css-grid
17
martin

Vous avez deux problèmes différents ici.

Je vais aborder le premier, qui doit contenir l'image dans son conteneur. Vous l'avez presque eu.

Votre code: 

.photo > img {
  object-fit: cover;
  width: 100%;
}

Vous avez juste besoin de spécifier une hauteur maximale sur l'image pour qu'elle ne puisse pas déborder du conteneur:

.photo > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

démo JSFiddle

Le deuxième problème, qui consiste à redimensionner la taille du conteneur d’images et à faire glisser les éléments de la grille ci-dessous lorsque l’image devient plus petite, est beaucoup plus complexe.

Ce n'est pas un problème lié à l'image. En fait, vous pouvez supprimer complètement l'image lorsque vous essayez de résoudre ce problème.

Il s'agit d'un problème de dimensionnement dynamique d'un élément de grille (le conteneur d'image). Pourquoi cet élément de la grille changerait-il de taille par rapport à la taille de l'image, alors que sa taille est contrôlée par grid-template-columns et grid-template-rows?

De plus, pourquoi la rangée inférieure des éléments de la grille (tag, album, rotate) suivrait-elle le conteneur d'images vers le haut ou vers le bas? Ils devraient quitter leur rangée.

La mise à l'échelle du conteneur de grille entier ne serait pas un problème. Mais il semble que vous souhaitiez uniquement mettre à l'échelle un élément de la grille (le conteneur d'image). C'est délicat. Vous cherchez probablement des conteneurs supplémentaires, auto valeurs pour les longueurs, et éventuellement des scripts.

Voici ce qui se passe si vous attribuez aux lignes de l'image une valeur auto: démo JSFiddle

22
Michael_B

Et si vous utilisiez un background-image à l'intérieur de l'une des cellules de la grille plutôt qu'une balise IMG (vous n'avez pas utilisé display: grid b/c c'est tellement nouveau - cool!)

Ensuite, en utilisant background-size et background-position, vous pouvez le dimensionner correctement dans cette cellule.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas: "info    photo photo photo   photo" "comment photo photo photo   photo" "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
  height: 100%;
  background-size: cover; /* <-- background size */
  background-position: center; /* <-- background position */
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}
<div class="container">
  <div class="photo" style="background-image: url('https://thumbs.web.sapo.io/?epic=YmIzAEUIMb3pue+Zz8qV8QS/WuKmq0vrL/lWiluSn7SstKeeh7/UTTBAuDlhHFD6YC9+vaCHBQuNOXeVaHkjzTSE8tF3hMBev6512ha92Yc4kRw=&W=1200&H=627&crop=center&delay_optim=1')">
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>
3
flyer

J'ai une légère correction qui fonctionne pour toute combinaison de rapport d'aspect des deux cellule css-grid et src img. (La solution acceptée ne fonctionnant que si le rapport de format de la cellule est supérieur au rapport de format de l'image). C'est très simple:

.photo > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
0
Dado