Contain Image in nested grid

Question

In my attempts on understanding grids, I’ve failed to fully comprehend how to fit a larger image to the predetermined size of the grid, which would reduce size of the image. My image enlarges the grid Box1 instead and, by default box2,3,4, and 5 are pushed further out. Which can be seen when zoomed out. I've been lurking for 2 days now on similar project like mine and used their solutions, however, does not seem to stick to mine A couple of solutions I’ve read:

Edited, for grammar.

Variable image height in Nested Grid UWP Resize image in grid to fit div to smaller size Controlling the size of an image within a CSS Grid layout Control size of images in nested grid layouts containing the image inside a css grid

Best Regards

.grid {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  background-color: #8b9dc3;
  height: 100vh;
}
.box1 {
  background-color: #3b5998;

  grid-column: 1/4;
  grid-row: 1/2;
  z-index: 2;
  padding: 1em;
}
.box2 {
  grid-column: 1;
  grid-row-start: 2;
  grid-row-end: 12;
  color: white;
}
.box3 {
  background-color: #ffffff;
  grid-row: 2/12;
  grid-column: auto;
  color: black;
}
.box4 {
  align-self: stretch;
  grid-column: 3;
  grid-row: 2/12;
  color: white;
}
.box5 {
  background-color: #3b5998;
  grid-column: 1/4;
}
#headerImage {
  height: 100%;
  object-fit: cover;
  max-height: 100%;
  contain: content;
}
.nested {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-auto-rows: 100%;
  grid-gap: 1px;
}
.nested > div {
  border: #333 1px solid;
  padding: 1em;
}
html,
body {
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;

  margin: 0;
  padding: 0;
  overflow: hidden;
}
.h1 {
  color: black;
  font: bold;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="mystyle3.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="grid">
        <div class="box box1">box1
            <div id="headerImage"><img src="https://wallpaperaccess.com/full/1713248.jpg" alt="a picture">BOX 1 </div>
        </div>
        <div class="box box2">
            <div class="nested">
            </div>

        </div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
        <div class="box box5">box5</div>

    </div>
</body>


</html>

Please could you check the HTML you have provided as there is a weird setting for id of headerImage (and a missing closing double quotes). — A Haworth, Oct 18 '21 at 07:38

score 1 · Accepted Answer · answered Oct 18 '21 at 08:04

The problem is that the img is an actual element taking up space.

This snippet removes that div and img and instead puts the image as a background with size cover. This ensures that box1 remains the size given by the grid settings.

.grid {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  background-color: #8b9dc3;
  height: 100vh;
}
.box1 {
  background-color: #3b5998;

  grid-column: 1/4;
  grid-row: 1/2;
  z-index: 2;
  padding: 1em;
  overflow: hidden;
}
.box2 {
  grid-column: 1;
  grid-row-start: 2;
  grid-row-end: 12;
  color: white;
  background-color: magenta;
}
.box3 {
  background-color: #ffffff;
  grid-row: 2/12;
  grid-column: auto;
  color: black;
}
.box4 {
  align-self: stretch;
  grid-column: 3;
  grid-row: 2/12;
  color: white;
}
.box5 {
  background-color: #3b5998;
  grid-column: 1/4;
}
.nested {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-auto-rows: 100%;
  grid-gap: 1px;
}
.nested > div {
  border: #333 1px solid;
  padding: 1em;
}
html,
body {
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;

  margin: 0;
  padding: 0;
  overflow: hidden;
}
.h1 {
  color: black;
  font: bold;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="mystyle3.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="grid">
        <div class="box box1" style="background-image: url(https://wallpaperaccess.com/full/1713248.jpg); background-size: cover;">box1
        </div>
        <div class="box box2">
            <div class="nested">
            </div>

        </div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
        <div class="box box5">box5</div>

    </div>
</body>


</html>

score 0 · Answer 2 · answered Oct 18 '21 at 08:05

To avoid the image to resize the grid (or overflow it) you can set its size to 0 and min-size to 100%

example

img {
  height:0;
  width:0;
  min-height:100%;
  min-width:100%;
  object-fit:cover
}

You may also look at https://developer.mozilla.org/en-US/docs/Web/CSS/object-position aside object-fit

snippet:

.grid {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  background-color: #8b9dc3;
  height: 100vh;
}

.box1 {
  background-color: #3b5998;
  grid-column: 1/4;
  grid-row: 1/2;
  z-index: 2;
  padding: 1em;
}

.box2 {
  grid-column: 1;
  grid-row-start: 2;
  grid-row-end: 12;
  color: white;
}

.box3 {
  background-color: #ffffff;
  grid-row: 2/12;
  grid-column: auto;
  color: black;
}

.box4 {
  align-self: stretch;
  grid-column: 3;
  grid-row: 2/12;
  color: white;
}

.box5 {
  background-color: #3b5998;
  grid-column: 1/4;
}

#headerImage {
  height: 100%;
  object-fit: cover;
  max-height: 100%;
  contain: content;
}

.nested {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-auto-rows: 100%;
  grid-gap: 1px;
}

.nested>div {
  border: #333 1px solid;
  padding: 1em;
}

html,
body {
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.h1 {
  color: black;
  font: bold;
}

#headerImage img {
  height: 0;
  width: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover
}

<div class="grid">
  <div class="box box1">box1
    <div id="headerImage"><img src="https://wallpaperaccess.com/full/1713248.jpg" alt="a picture">BOX 1 </div>
  </div>
  <div class="box box2">
    <div class="nested"> </div>
  </div>
  <div class="box box3">box3</div>
  <div class="box box4">box4</div>
  <div class="box box5">box5</div>

</div>

ahh, okay! I understand, I believe. So, if I use this method, I can have same quality? or does the image lose quality? or do I get snippets out of the picture instead of the whole? — Undead Space, Oct 18 '21 at 08:23
the quality of the image remains the same, this is no trouble as long as it's being scaled down and this image is about 3440x1440 pixels, so before you need to stretch and make it loose quality, you'll need a screen quit big ... @UndeadSpace background-size:cover or object-fit:cover rescales it the same way. object-fit is for img inside the HTML (seen by searchengines) , background-size is for background without any meaning but design, it won't be referenced by a search engine. — G-Cyrillus, Oct 18 '21 at 18:30

Contain Image in nested grid

2 Answers2