如何 - 响应式图片库
了解如何使用 CSS 创建响应式图片库。
图片库
调整浏览器窗口大小以查看响应式效果
在此处添加图片描述
在此处添加图片描述
在此处添加图片描述
在此处添加图片描述
创建图片库
步骤 1) 添加 HTML
示例
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="五渔村">
</a>
<div class="desc">在此处添加图片描述</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="森林">
</a>
<div class="desc">在此处添加图片描述</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="北极光">
</a>
<div class="desc">在此处添加图片描述</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="山脉">
</a>
<div class="desc">在此处添加图片描述</div>
</div>
</div>
<div class="clearfix"></div>
步骤 2) 添加 CSS
此示例使用媒体查询在不同的屏幕尺寸上重新排列图片：对于大于 700 像素宽的屏幕，它将并排显示四张图片；对于小于 700 像素的屏幕，它将并排显示两张图片。对于小于 500 像素的屏幕，图片将垂直堆叠 (100%)
示例
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
自己尝试 »
提示： 访问我们的 HTML 图片教程 了解有关图片的更多信息。
提示： 访问我们的 CSS 样式图片教程 了解有关如何设置图片样式的更多信息。
