最大高度 - 在窗口大小調整時更改？

我想設置一個網格的最大高度，以便一定高度後的圖像不顯示。我希望顯示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行圖像？

來源

2014-11-24 panthro

...圖像是不同的媒體查詢小...

在這種情況下，你所要做的就是創建網格高度非常相似的媒體查詢。如果你的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 */ 
    } 
}

來源

2014-11-24 14:59:49

但是，這不涉及數百個媒體查詢嗎？一排圖像的高度隨着瀏覽器寬度的每個像素變化而變化 – panthro 2014-11-24 15:03:41

另外我不想惹到基礎塊網格css併爲每個li設置一個高度，那是什麼塊網格爲我做的 – panthro 2014-11-24 15:05:24

不幸的是，我是不是zurb基金會的專家。「對於不同的媒體查詢，圖像較小」意味着有限數量的這些...以及確定網格圖像高度的媒體查詢。如果它們實際上直接取決於窗口高度（例如固定的百分比），那麼我建議將行數的高度加倍，如果這是可能的話。 – 2014-11-24 15:16:55

最大高度 - 在窗口大小調整時更改？

回答

相關問題