Controlling The Size of an Image Within a CSS Grid Layout

Controlling the size of an image within a CSS Grid layout

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

How to fit a image into css-grid without stretching

Take one class for only image. Give particular height and width to image class and give below css to image.

.class-name img {
  max-height: 100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
}

Contain Image in nested grid

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>

Image within CSS grid - How to make the row height be determined by the content (image) height? Chrome vs rendering correctly in Firefox

Adding the following solved the issue:

img, video, p, .studentWorkContent {
    
    overflow:hidden;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;

}

It appears that Chrome needs height and width to be set to auto for it to work. Adding this renders the content the same as firefox, and the grid rows adjust to the size of the content.

Fit an image in a fixed height row with css grid

I was finally able to figure it out! Looks like you need to wrap the image in a div AND be sure to specify overflow:hidden. For some reason, that will ensure that the image gets resized down and isn't just scaling up to fit within the parent.

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
}

.container {
  width: 500px;
  height: 300px;
  background-color: green;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 40px;
}

.image-container {
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-color: red;
}

img {
  display: flex;
  flex: 0 1 auto;
  object-fit: contain;
  background-color: red;
}

span {
  background-color: blue;
  color: white;
}

<a href='somelink' class="container">
  <div class="image-container">
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt="Sample Image">
  </div>
  <span>Test</span>
</a>

Why does changing the image size in css grid create padding?

When you say 75% it means you will have 25% of free space whatever the configuration so don't play with the image size. Adjust the column size:

.mygrid {
  display: grid;
  grid-template-columns: repeat(3, 25%); /* adjust here */
  justify-content: center;
}

.mygrid img {
  max-width: 100%; /* keep 100% here */
  border: 1px solid green;
}

<div class="mygrid mt-6">
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
  <img src="https://placekitten.com/1024/1024" alt="Sample photo" />
</div>

Grid gallery where images are not the same size

Did a little play on Codepen, and I think this can give you a basic idea to start with: https://codepen.io/brandonzhang/pen/PoaJyQw?editors=1100

<div class="grid">
  <img src='https://images.unsplash.com/photo-1666880147941-b145c43cfe6b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxMDk&ixlib=rb-4.0.3&q=80' alt=''>
  <img src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxMDk&ixlib=rb-4.0.3&q=80' alt=''>
  <img src='https://images.unsplash.com/photo-1593875460489-aa913d8a0fe2?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxNjk&ixlib=rb-4.0.3&q=80' alt=''>
</div>

img {
  width: 100%;
  object-fit: cover;
}
.grid {
  --gap: 8%;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 2fr 3fr;
  gap: var(--gap);
  padding: var(--gap);
  position: relative;
}

img:nth-of-type(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

img:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  height: 80%;
}

.grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(2 / 5 * 100% + var(--gap) * 2);
  bottom: 0;
  background: lightseagreen;
  z-index: -1;
}

Controlling The Size of an Image Within a CSS Grid Layout