Controlling the size of an image within a CSS Grid layout

Question

I have a CSS grid layout with a bunch of areas and a photo container.

I don't know how to:

1. control the size of the photo, so that it is contained within the area of the grid

2. keep the width of the photo at 100% (thus equal to its container) and scale the height of the container to fit the photo. Basically, when the window becomes smaller, the width of the photo becomes smaller, and so does the height - pulling the tag, album, and rotate elements up.

.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>

Answer 1

You have two different problems here.

I'll address the first one, which is to contain the image in its container. You almost had it.

Your code:

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

You just needed to specify a maximum height on the image so it could not overflow the container:

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

JSFiddle demo

---

The second problem, which is to scale the size of the image container, and drag up the grid items below when the image gets smaller, is significantly more complex.

This isn't an issue relating to the image. In fact, you can remove the image altogether when trying to solve this problem.

This is an issue of dynamically sizing a grid item (the image container). Why would this grid item change size in relation to the image size, when its size is being controlled by grid-template-columns and grid-template-rows?

In addition, why would the bottom row of grid items (tag, album, rotate) follow the image container either up or down? They would have to exit their row.

Scaling the entire grid container wouldn't be a problem. But it seems like you only want to scale one grid item (the image container). It's tricky. You're probably looking at additional containers, auto values for lengths, and possibly scripting.

Here's what happens if you give the image rows an auto value: JSFiddle demo

Answer 2

What if you use a background-image inside one of the grid cells rather than an IMG tag (haven't used display: grid yet b/c it's so new - cool!)

Then using background-size and background-position, you can size it properly within that cell.

.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>

Answer 3

I have a slight correction which works for any combination of aspect ratio of both css-grid cell and src img. (As the accepted solution only works if the aspect ratio of the cell is greater than the aspect ratio of the image). It's very simple:

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

Answer 4

You probably need to add explicit width: 100% to the image