显示网格最大高度无响应

Question

我已经设置了一个我想使用的网格布局，但我无法弄清楚如何为网格的行设置最大高度，并且在调整窗口大小时仍然缩小行高。 我试过添加grid-auto-rows: minmax(auto, 500px); 我认为这正是我所需要的。 但这只是将高度保持在 500 像素，即使在缩小屏幕尺寸时也是如此。 我希望图像能够响应地缩小。 任何帮助都会很棒！

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>

设置 max-height 和 max-width 不会响应缩小，您必须创建媒体查询以显示不同大小的图像。

将 CSS 类添加到每个具有不同大小的媒体查询，将使浏览器将所需的图像大小呈现给每个不同大小的浏览器窗口。

媒体查询可以与其他 CSS 类共存。 然后，在媒体查询之外，使用 height:auto 为图像添加一个 CSS 类。 这将适用于仅添加一行 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; }

要使图像响应多个范围，您可以结合使用 max-width 和 min-width 媒体查询。 要为浏览器窗口指定图像大小，大小在 1024 像素和 1280 像素之间，请为屏幕添加媒体查询，1024 像素作为最小宽度，1280 像素作为最大宽度。

@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; }

或者简单地将其添加到您的 css 中：

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

您还想添加 max-height 吗？

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

你去吧。