如何制作反应灵敏的图片库？
提问于 2013-09-13 20:07:03
我正在尝试创建一个固定宽度图像的响应库。我需要一个给定行上的图像数量根据浏览器窗口的宽度而变化，以及以页面为中心的图像行。
两种方法中的一种都行。每个图像之间可以有固定数量的像素(例如10 be )，容器div可以更改宽度以匹配。或者，容器div可以固定宽度，图像之间的距离变化以适合。
提前感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-13 20:29:12
举个简单的例子，这是一个小提琴
<div id="gallery">
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
<img src="/" alt="Image"/>
</div>
#gallery {
width: 960px;
margin: 0 auto;
padding-top: 10px;
text-align: center;
border: 1px solid #555;
}
img {
margin: 5px;
height: 280px;
width: 300px;
}
@media all and (max-width:960px) {
#gallery {
width: 900px;
}
}
@media all and (max-width:720px) {
#gallery {
width: 660px;
}
}
@media all and (max-width:480px) {
#gallery {
width: 420px;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18798183
复制
腾讯云开发者
