Nested CSS-Grids and image resizing

Question

I'm learning CSS Grid and I have a problem with image resizing.

To show you the problem, I created a main layout with 2 columns and inside the first column, I created another grid where I wanted to place an image and some text in a column.

Please delete the html comment, so that you'll see the image.

In the code snippet, the red area shows the cell where the image should go. Now, the image is larger than the red 'container' (height: 200px) grid-cell and I want the image to shrink inside the cell, so that it fits inside and keeps the aspect ratio (cut-offs left/right or top/bottom are needed). Object-fit on the image doesn't work. Positioning the image like "object-position: 50% 50%" would also be nice but that doesn't work either. I'm currently not sure how to fix this problem.

.mainlayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.media {
  grid-column: 1 / 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px auto auto;
}

.media .image {
  grid-column: 1;
  grid-row: 1;
  background-color: red;
}

.media h4 {
  grid-column: 1;
  grid-row: 2;
}

.media p {
  grid-column: 1;
  grid-row: 3;
}

<section class="mainlayout">
  <div class="media">
    <div class="image">
      <!--<img src="http://placehold.it/1000x1000">-->
    </div>
    <h4>Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</section>

Thank you for your help.

Here is the solution used by most people ->> jsfiddle.net/nsrfpkb2/7 — Morpheus
– Morpheus, Commented Mar 21, 2017 at 11:17
The object-position property determines the alignment of the replaced element inside its box. — Morpheus
– Morpheus, Commented Mar 21, 2017 at 11:26

SKeurentjes · Accepted Answer · 2017-03-21 12:14:34Z

3

You don't have styling on the image itself. Add the following lines to your stylesheet.

.media .image img {
  display: block;
  max-width: 100%;
  height: auto;
}

Example: https://jsfiddle.net/nsrfpkb2/8/

Update

You need to give your .image element a position: relative; and overflow: hidden;. Then give your img a position: absolute; top: 50%; left: 50%; and transform: translate(-50%, -50%);

.news_layout{
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    
    .media{
        grid-column: 1 / 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 200px auto auto;
        position: relative;
    }
    
    .media .image{
        height: 200px;
        grid-column: 1;
        grid-row: 1;
        background-color:red;
        position: relative;
        overflow: hidden;
    }
          
    .media .image img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        max-width: 100%;
        height: auto;
    }
    
    .media h4{
        grid-column: 1;
        grid-row: 2;
    }
    
    .media p{
        grid-column: 1;
        grid-row: 3;
    }

<section class="news_layout">
  <div class="media">
	  <div class="image">
		  <img src="http://placehold.it/1000x1000">
		</div>
		<h4>Card title</h4>
		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</section>

edited Mar 21, 2017 at 12:14

answered Mar 21, 2017 at 11:18

SKeurentjes

1,87812 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dave_zen Over a year ago

Thanks, in your solution, the image is shown complete. But the area where the image should be placed is only 200px height .media{ grid-template-rows: 200px auto auto;} What I want, is that the image has the complete width of the container (which works) but also is only 200px height. Therefor, a vertical positioning of the image is necessary via CSS otherwise I would probably see only the top 200px of the image.

dave_zen Over a year ago

Thanks for your edited version. If you lower the width of the container you get space over and under the image. Would it be possible to fill the full height of 200px with the image and keep the aspect ratio? I know that therefor the image would be 'cropped' on the left and right side but that's ok. I think that would be similar to object-fit: cover.

SKeurentjes Over a year ago

You can also set a max-height: 100%; on the img element.

dave_zen Over a year ago

max-height stretches the image vertically and the aspect ratio is gone. I don't want that.

Collectives™ on Stack Overflow

Nested CSS-Grids and image resizing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related