響應式圖片庫

希望這對於某人來說不會是一件容易的事。基本上我試圖達到如下目標。響應式圖片庫

根據視口寬度取決於所顯示圖像的數量，這些圖像將始終填充空間100％，但會根據寬度顯示較少的圖像。

HTML可能是：

<div class="image"> 
      <img src="XXXX.jpg"/> 
</div> 
<div class="image"> 
      <img src="XXXX.jpg"/> 
</div> 
<div class="image"> 
      <img src="XXXX.jpg"/> 
</div> 
<div class="image"> 
      <img src="XXXX.jpg"/> 
</div> 
<div class="image"> 
      <img src="XXXX.jpg"/> 
</div> 
<div class="image"> 
      <img src="XXXX.jpg"/> 
</div> 
<div class="image"> 
      <img src="XXXX.jpg"/> 
</div>

所以在1200像素，我們將顯示，而在屏幕上的所有圖像（在同一行上）在屏幕上說400像素或更低，我們將只顯示2圖像。

我想有一個JS解決方案，但我相對較新的JS，似乎無法找到一個解決方案，是可以理解和可關聯的。

在此先感謝

來源

2016-03-17 Tomatron

什麼會寬度> 400的屏幕上顯示和<1200？ –

最好用CSS媒體查詢來做到這一點。而不是JavaScript。媒體查詢教程：http://www.w3schools.com/css/css_rwd_mediaqueries.asp – Sarcoma

將圖像的分辨率保持一致嗎？如果200 X 300的圖像和其他100 X 400的圖像會發生什麼？ – CoderHawk

有一個CSS解決方案。你可以使用媒體查詢來做到這一點。

@media (max-width: 400px){ 
    //your code 
}

來源

2016-03-17 09:15:52

沒有媒體查詢所需

HTML

<div class="wrapper">  
<div class="image"> 
       <img src="XXXX.jpg"/> 
    </div> 
    <div class="image"> 
       <img src="XXXX.jpg"/> 
    </div> 
    <div class="image"> 
       <img src="XXXX.jpg"/> 
    </div> 
    <div class="image"> 
       <img src="XXXX.jpg"/> 
    </div> 
    <div class="image"> 
       <img src="XXXX.jpg"/> 
    </div> 
    <div class="image"> 
       <img src="XXXX.jpg"/> 
    </div> 
    <div class="image"> 
       <img src="XXXX.jpg"/> 
    </div> 
</div>

CSS：

.wrapper{width:100%;overflow:hidden} 
.wrapper .image{float:left;}

來源

2016-03-17 09:21:28

你如何處理這種情況？ https://jsfiddle.net/g1mhor3c/ – CoderHawk

這可以通過使用'最大高度'屬性來處理，因爲所有的圖像將具有相同的高度。 [https://jsfiddle.net/g1mhor3c/1/](https://jsfiddle.net/g1mhor3c/1/） –

同意，但如果您不知道集合中最大圖像的高度會發生什麼情況;說所有的圖像動態加載？ – CoderHawk

它進行測試：

HTML：

<div class="image f_left"> 
     <img src="bill.png"/> 
</div> 
<div class="image f_left"> 
     <img src="bill.png"/> 
</div> 
<div class="image f_left"> 
     <img src="bill.png"/> 
</div> 
<div class="image f_left"> 
     <img src="bill.png"/> 
</div> 
<div class="image f_left"> 
     <img src="bill.png"/> 
</div> 
<div class="image f_left"> 
     <img src="bill.png"/> 
</div> 
<div class="image f_left"> 
     <img src="bill.png"/> 
</div>

CSS：必須是

.f_left 
{ 
    float:left; 
    padding-bottom: 5%; 
} 
@media only screen and (max-width : 480px) { 
    /* Smartphone view: 1 tile */ 
    .image{ 
     width: 100%; 
    } 
} 
@media only screen and (max-width : 650px) and (min-width : 481px) { 
    /* Tablet view: 2 tiles */ 
    .image { 
     width: 50%; 
    } 
} 
@media only screen and (max-width : 1050px) and (min-width : 651px) { 
    /* Small desktop/ipad view: 3 tiles */ 
    .image { 
     width: 33.3%; 
    } 
} 
@media only screen and (max-width : 1290px) and (min-width : 1051px) { 
    /* Medium desktop: 4 tiles */ 
    .image { 
     width: 25%; 
    } 
} 
@media only screen and (max-width : 1600px) and (min-width : 1291px) { 
    /* Medium desktop: 4 tiles */ 
    .image { 
     width: 20%; 
    } 
}

來源

2016-03-17 09:44:51

謝謝你的回覆。使用媒體查詢非常合理，複雜（可能）是我想要隱藏任何多餘的圖像，因此總是隻有一行。例如，我在代碼中有六個圖像，但在移動設備上，我只顯示前兩個圖像，每個圖像的寬度爲50％，其他4個圖像將隱藏。 – Tomatron

響應式圖片庫

回答

相關問題