頁面上的響應式/自適應照片縮略圖

場景：我想製作一個包含許多圖像縮略圖（大約20）的html頁面。我想讓它適應/反應。當它在更寬的瀏覽器上時（如PC瀏覽器 - mozilla等），它應該有4個連續的縮略圖（見圖1）（見圖2）然後，當瀏覽器縮小它的大小時，它應該減小它的大小。頁面上的響應式/自適應照片縮略圖

而且如果瀏覽器太小，每行應該會出現1個縮略圖（比如移動瀏覽器等）。（見圖片2）

應該在照片之間有空間（填充？）

我想這應該使用CSS來實現？

我只有下面的代碼，當瀏覽器的大小減小時，縮小縮略圖的大小。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
img { 
    width: 100%; 
    height: auto; 
} 
</style> 
</head> 
<body> 

<img src="img_chania.jpg" width="460" height="345"> 
<p>Resize the browser window to see how the image will scale.</p> 

</body> 
</html>

PS：EDIT，看這些照片，供進一步CLARIFICATIONS.Thanks

來源

2016-03-02 Pretty_Girl

就可以實現這一點使用media queries

看看這個片斷：

#container { 
 
    width: 100%; 
 
    max-width: 980px; /* updated - choose whatever width you prefer */ 
 
    margin: auto /* updated */ 
 
} 
 
#container > div { 
 
    width: 25%; 
 
    float: left; 
 
} 
 
#container img { 
 
    max-width: 100%; 
 
    display: block; 
 
    box-sizing: border-box; 
 
    padding: 5% 
 
} 
 
/*whatever width query you like for phones*/ 
 

 
@media screen and (max-width: 640px) { 
 
    #container > div { 
 
    width: 100%; 
 
    float: none 
 
    }

<div id="container"> 
 
    <div> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    </div> 
 
    <div> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    </div> 
 
    <div> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    </div> 
 
    <div> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    </div> 
 
    <div> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    </div> 
 
    <div> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    <img src="//lorempixel.com/1600/900" /> 
 
    </div> 
 
</div>

來源

2016-03-02 15:28:06 dippas

由於這個作品在一定程度上。但照片（專欄）並沒有保持彼此接近。我希望照片位於頁面中心和欄目的中心。如果你不明白我說的話，請告訴我，我會附上描述我的意思的另一張照片。 :)。會添加一個表或什麼東西來解決這個問題？ –

如果我明白你的意思，你不希望這得到超過X'width'，因爲你想在邊上有白色邊距？因爲目前正在對您的問題 – dippas

上面的3張圖片進行上述處理，所以當瀏覽器寬度很小時，所有圖片都會堆疊到一列。但是，圖片不是彼此靠近並且不在頁面上居中。澄清，另附圖片，請通讀。謝謝 –

頁面上的響應式/自適應照片縮略圖

回答

相關問題