Question

我在基础中有一个块网格，其中包含大量图像。

我想设置网格的最大高度，以便不显示某个高度后的图像。我希望显示2行，然后隐藏其余部分。

HTML：

<div class="row">
    <div class="small-12 columns my-grid">
        <ul class="small-block-grid-4 medium-block-grid-8 large-block-grid-9 text-center">
          <li><div style="background-image: url(my-img.jpg)"></div></li>

CSS

.my-grid{

    min-height: 300px;
    overflow: hidden;

以上作品和300px以下的任何内容都被隐藏。我遇到麻烦但是当窗口调整大小时，300px不再是2行图像所需的高度，因为不同媒体查询的图像较小，我的问题是，如何保持最大高度相对于2行图像？

Answer 1

...不同媒体查询的图片较小......

在这种情况下，您所要做的就是为网格高度创建非常类似的媒体查询。如果您根据屏幕高度格式化图像的CSS是这些行（假设li元素完整地包装图像）：

@media (max-height: 900px) {
    .my-grid li {
        height: 150px;
    }
}

@media (max-height: 700px) {
    .my-grid li {
        height: 120px;
    }
}

@media (max-height: 500px) {
    .my-grid li {
        height: 100px;
    }
}

...然后我们确切知道缩小图像时遇到的条件。我们可以使用它来缩放网格本身：

@media (max-height: 900px) {
    .my-grid {
        height: 300px; /* 2*150 = two rows of images */
    }
}

@media (max-height: 700px) {
    .my-grid {
        height: 240px; /* 2*120 = two rows of images */
    }
}

@media (max-height: 500px) {
    .my-grid {
        height: 200px; /* 2*100 = two rows of images */
    }
}

最大高度 - 调整窗口大小时的更改？

1 个答案: