显示网格最大高度无响应

Question

I have setup a grid layout that I would like to use, but I cannot figure out how to set a max height for the grid's row and still have the row height scale down when the window is resized . I have tried adding grid-auto-rows: minmax(auto, 500px); which I thought was exactly what I needed. But this just keeps the height at 500px constantly even when scaling down the screen size. I would like the images to scale down responsively. Any help would be great!

https://jsfiddle.net/u8fd73gh/

 .grid { max-width: 700px; /* Adjusting the width doesnt scale the images bellow 500px */ margin: auto; display:grid; grid-template-columns: repeat(2, 1fr); /* grid-template-rows: repeat(5, minmax(auto,100px)); */ grid-auto-rows: minmax(auto, 500px); column-gap: 20px; row-gap: 20px; } img { width: 100%; height: 100%; object-fit: cover; } .box-2 { grid-area: auto / auto / span 2 / span 1; } .box-3 { grid-area: auto / auto / span 2 / span 1; } .box-5 { grid-area: auto / auto / span 2 / span 2; }

 <div class="grid"> <div class="box box-1"> <img src="https://images.pexels.com/photos/3032049/pexels-photo-3032049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-2"> <img src="https://images.pexels.com/photos/3220558/pexels-photo-3220558.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" /> </div> <div class="box box-3"> <img src="https://images.pexels.com/photos/1567698/pexels-photo-1567698.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-4"> <img src="https://images.pexels.com/photos/5778748/pexels-photo-5778748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-5"> <img src="https://images.pexels.com/photos/5827880/pexels-photo-5827880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /> </div> <div class="box box-1"> <img src="https://images.pexels.com/photos/3220558/pexels-photo-3220558.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" /> </div> <div class="box box-2"> <img src="https://images.pexels.com/photos/3032049/pexels-photo-3032049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-3"> <img src="https://images.pexels.com/photos/1567698/pexels-photo-1567698.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-4"> <img src="https://images.pexels.com/photos/5778748/pexels-photo-5778748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-5"> <img src="https://images.pexels.com/photos/5827880/pexels-photo-5827880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /> </div> </div>

Answer 1

 .grid { max-width: 700px; /* Adjusting the width doesnt scale the images bellow 500px */ margin: auto; display:grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 20px; } .box-2 { grid-area: auto / auto / span 2 / span 1; } .box-3 { grid-area: auto / auto / span 2 / span 1; } .box-5 { grid-area: auto / auto / span 2 / span 2; } .grid .box img { width: 100%; height: 100%; overflow: hidden; }

 <div class="grid"> <div class="box box-1"> <img src="https://images.pexels.com/photos/3032049/pexels-photo-3032049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-2"> <img src="https://images.pexels.com/photos/3220558/pexels-photo-3220558.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" /> </div> <div class="box box-3"> <img src="https://images.pexels.com/photos/1567698/pexels-photo-1567698.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-4"> <img src="https://images.pexels.com/photos/5778748/pexels-photo-5778748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-5"> <img src="https://images.pexels.com/photos/5827880/pexels-photo-5827880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /> </div> <div class="box box-1"> <img src="https://images.pexels.com/photos/3220558/pexels-photo-3220558.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" /> </div> <div class="box box-2"> <img src="https://images.pexels.com/photos/3032049/pexels-photo-3032049.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-3"> <img src="https://images.pexels.com/photos/1567698/pexels-photo-1567698.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-4"> <img src="https://images.pexels.com/photos/5778748/pexels-photo-5778748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" /> </div> <div class="box box-5"> <img src="https://images.pexels.com/photos/5827880/pexels-photo-5827880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" /> </div> </div>

Setting max-height and max-width wont scale down responsively, you have to create media queries to display different size of images.

Adding the CSS class to each media query with a different size will make the browser render the desired image size to each differently sized browser window.

The media query can coexist with other CSS classes. Then, outside of the media queries, add a CSS class for the image with height:auto. This will work for both media queries with only adding one line of CSS.

@media screen and ( max-width: 1024px ) {
img.responsive { width: 200px; }
}
@media screen and ( min-width: 1025px) {
img.responsive { width: 300px;}
}
img.responsive { height: auto; }

To make the image respond to multiple ranges you can combine the max-width and min-width media queries. To specify an image size for browser windows, sized between 1024px and 1280px, add a media query for screen, 1024px as min-width, and 1280px as max-width.

@media screen and ( max-width: 1024px ) {
img.responsive { width: 200px; }
}
@media screen and ( min-width:1025px ) and ( max-width: 1280px ) {
img.responsive { width: 300px; }
}
@media screen and ( min-width: 1081px ) {
img.responsive { width: 400px; }
}
img.responsive { height: auto; }

Or simply add this to your css :

.grid .box img {
  width: 100%;
  height: 100%; //or auto is the best
  overflow: hidden;
}

You still want to add max-height ?

.grid .box img {
  max-height: 500px;
  overflow: hidden;
}

There you go.