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

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; 

上述工作以及任何低于300像素是隐藏的。虽然在调整窗口大小时，我遇到了麻烦，但对于2行图像，300px不再是所需的高度，因为对于不同的媒体查询，图像较小，我的问题是，如何将最大高度保持为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 */ 
    } 
}