如何製作 - 響應式圖片庫
學習如何使用 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
此示例使用媒體查詢為不同螢幕尺寸重新排列圖片：對於寬度大於 700px 的螢幕，它將並排顯示四張圖片；對於寬度小於 700px 的螢幕，它將並排顯示兩張圖片。對於寬度小於 500px 的螢幕，圖片將垂直堆疊（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 樣式圖片教程 瞭解更多關於如何樣式化圖片的資訊。
