如何在CSS中实现响应式图片库，方法是什么

发布时间：2023-10-05 10:17:39 所属栏目：语言来源：

导读：这篇文章给大家分享的是“CSS中实现响应式图片库怎样做，方法是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

CSS如果想要实现响应式图

这篇文章给大家分享的是“CSS中实现响应式图片库怎样做，方法是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

CSS如果想要实现响应式图片库_图片列表页面自适应，则必须在不同屏幕尺寸下，按照不同的百分比定义图片库或则图片列表，下面是代码：
<!DOCTYPE html>
<html>
<head>
<style>
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;
}

//正常屏幕，则按照1/4屏幕显示图片，表示最多显示4张图片
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

//屏幕低于700像素，高于500像素，则按照屏幕50%显示比例
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

//屏幕宽度低于500像素，则按照屏幕100%显示图片
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}

.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>

<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>

</body>
</html>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!