页面上的响应式/自适应照片缩略图

场景：我想制作一个包含许多图像缩略图（大约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张图片进行上述处理，所以当浏览器宽度很小时，所有图片都会堆叠到一列。但是，图片不是彼此靠近并且不在页面上居中。澄清，另附图片，请通读。谢谢 –

页面上的响应式/自适应照片缩略图

回答

相关问题