极客教程CSS 图片库
CSS 图片库是使用 CSS 来显示的一组图片。CSS 可以用来控制图片的布局、大小、间距和其他视觉属性。
CSS 图片库通常用于在网站上以视觉上吸引人的方式展示产品、作品集或其他视觉内容。
下面的示例展示了一种简单的图片库布局，以行的方式显示。
<html>
<head>
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery img {
width: 25%;
height: 250px;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="images/red-flower.jpg" alt="Red Flower">
<img src="images/white-flower.jpg" alt="White Flower">
<img src="images/orange-flower.jpg" alt="Orange Flower">
</div>
</body>
</html>
响应式图片库带有悬停效果
您可以使用悬停效果来创建一个简单而实用的图片库。当用户悬停在图片上时，图片将变大，并添加红色边框。
以下是一个示例：
<html>
<head>
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery .image-item {
width: 30%;
text-align: center;
}
.image-gallery img {
width: 100%;
height: 220px;
transition: transform 0.2s;
}
.image-gallery .image-item:hover {
transform: scale(1.1);
border: 3px solid red;
}
.image-description {
margin-top: 10px;
}
</style>
</head>
<body>
<h3>Hover over the images to see the effect</h3>
<div class="image-gallery">
<div class="image-item">
<img src="images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="images/white-flower.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
</div>
</body>
</html>
使用媒体查询创建图像库
您可以使用CSS媒体查询来创建一个响应式的图像库，根据屏幕宽度来缩放和重新排列内容，在不同设备和屏幕尺寸上提供最佳的视觉体验。在较小的屏幕上，图像会更宽，间距更大。
语法
@media [media query] {
/* CSS rules to apply if the media query matches */
}
这里是一个例子 –
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery .image-item {
width: 30%;
text-align: center;
}
.image-gallery img {
width: 100%;
height: 220px;
transition: transform 0.2s;
}
.image-gallery .image-item:hover {
transform: scale(1.1);
border: 3px solid red;
}
.image-description {
margin-top: 10px;
}
@media only screen and (max-width: 800px) {
.image-gallery .image-item {
width: 40%;
margin: 20px;
}
}
@media only screen and (max-width: 300px) {
.image-gallery .image-item {
width: 100%;
margin: 20px;
}
}
</style>
</head>
<body>
<h3>Hover over the images to see the effect</h3>
<div class="image-gallery">
<div class="image-item">
<img src="images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="images/white-flower.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
<div class="image-item">
<img src="images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="images/white-flower.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
</div>
</body>
</html>