CSS 图片库是使用 CSS 显示的图像集合。 CSS 可用于控制图像的布局、图像的大小、间距和其他视觉属性。
CSS 图片库通常在网站上用于以视觉方式显示产品、产品组合或其他视觉内容。
要创建一个简单的图片库，您可以按照以下步骤操作:
使用 HTML 容器元素，例如 <div> .
将图像添加到容器元素。您可以使用 <img> 标记来显示图像。
每个图像都应包含在 <a> 标记中，以使其可点击。
将 display: flex 属性添加到 div 容器元素。
添加 flex-flow:row wrap 属性，用于将 Flex 容器的方向设置为行。
简单图片库
以下示例显示了一个连续显示的简单图片库布局 -
<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="/css/images/red-flower.jpg" alt="Red Flower">
<img src="/css/images/white-flower.jpg" alt="White Flower">
<img src="/css/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="/css/images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="/css/images/see.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="/css/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>调整浏览器窗口大小以查看效果。</h3>
<div class="image-gallery">
<div class="image-item">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="/css/images/see.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
<div class="image-item">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="/css/images/see.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
</div>
</body>
</html> 具有水平滚动的 CSS 图片库
该示例演示如何使用 overflow 属性 -
<html>
<head>
<style>
.image-gallery {
overflow: auto;
white-space: nowrap;
padding: 5px;
background-color: #78e756;
}
.image-gallery img {
width: 25%;
height: 250px;
margin: 10px;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
<img src="/css/images/white-flower.jpg" alt="White Flower">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
<img src="/css/images/white-flower.jpg" alt="White Flower">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
</div>
</body>
</html> 具有垂直滚动的 CSS 图片库
以下示例演示如何使用 overflow 属性创建具有垂直可滚动布局的图片库 -
<html>
<head>
<style>
.image-gallery {
overflow: auto;
padding: 5px;
background-color: #78e756;
}
.image-gallery img {
width: 30%;
height: 250px;
margin: 10px;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
<img src="/css/images/white-flower.jpg" alt="White Flower">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
<img src="/css/images/white-flower.jpg" alt="White Flower">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
</div>
</body>
</html> CSS 网格图片库
以下内容示例演示了一个简单的图片库，它具有三种不同的视图:三个图像、两个图像或全宽。
当您单击其中一个按钮时，图库将切换到相应的布局。
<html>
<head>
<style>
.image-gallery {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.image-container {
width: 30%;
height: 250px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
width: 100%;
height: 100%;
margin: 10px;
}
.two-columns .image-container {
width: 45%;
margin: 10px;
}
.full-width .image-container {
width: 100%;
margin: 20px;
}
.button-container {
text-align: center;
}
.button-container button {
background-color: #7dfa2a;
border: none;
padding: 10px 20px;
margin: 15px;
}
</style>
</head>
<body>
<div class="button-container">
<button onclick="showFourImages()">Three Images</button>
<button onclick="showTwoImages()">Two Images</button>
<button onclick="showFullWidth()">Full Width</button>
</div>
<div class="image-gallery">
<div class="image-container">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="/css/images/white-flower.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
</div>
<div class="image-container">
<img src="/css/images/red-flower.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="/css/images/white-flower.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower">
</div>
</div>
<script>
function showFourImages() {
document.querySelector(".image-gallery").className = "image-gallery";
}
function showTwoImages() {
document.querySelector(".image-gallery").className = "image-gallery two-columns";
}
function showFullWidth() {
document.querySelector(".image-gallery").className = "image-gallery full-width";
}
</script>
</body>
</html> CSS 选项卡式图片库
以下示例创建一个简单的图片库。当您单击小图像时，将打开同一图像的较大版本 -
<html>
<head>
<style>
.image-gallery {
display: flex;
justify-content: space-between;
float: center;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
height: 250px;
left: 0;
top: 0;
}
.image-container img {
width: 200px;
height: 150px;
cursor: pointer;
}
.gallery-tab {
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tab-content {
margin: auto;
display: block;
width: 80%;
height: 80%;
}
.tab-content img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="image-gallery">
<div class="image-container" onclick="opentab('red')">
<img src="/css/images/red-flower.jpg" alt="Red Flower" id="red">
</div>
<div class="image-container" onclick="opentab('white')">
<img src="/css/images/white-flower.jpg" alt="White Flower" id="white">
</div>
<div class="image-container" onclick="opentab('orange')">
<img src="/css/images/orange-flower.jpg" alt="Orange Flower" id="orange">
</div>
</div>
<div id="tab" class="gallery-tab">
<img class="tab-content" id="tabImg">
</div>
<script>
function opentab(imageId) {
var tab = document.getElementById("tab");
var tabImg = document.getElementById("tabImg");
tab.style.display = "block";
tabImg.src = document.getElementById(imageId).src;
}
</script>
</body>
</html> CSS 幻灯片
以下示例演示了一个简单的图像幻灯片，其中包含导航按钮和点来指示当前幻灯片。用户可以单击导航按钮或点在幻灯片中的图像之间切换 -
<html>
<head>
<style>
.slideshow-container {
position: relative;
width: 100%;
overflow: hidden;
}
.image-gallery {
display: flex;
transition: transform 0.5s ease-in-out;
}
.image-container {
width: 100%;
height: 100%;
}
.image-container img {
width: 100%;
height: 100%;
}
.prev-img, .next-img {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
}
.next-img {
right: 0;
}
.prev-img:hover, .next-img:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dot-container {
text-align: center;
margin-top: 20px;
}
.custom-dot {
height: 10px;
width: 10px;
margin: 0 5px;
background-color: #e98a8a;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.active-dot {
background-color: #706868;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="image-gallery">
<div class="image-container">
<img src="/css/images/scenery.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="/css/images/scenery3.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="/css/images/scenery4.jpg" alt="Orange Flower">
</div>
</div>
<a class="prev-img" onclick="slides(-1)">❮</a>
<a class="next-img" onclick="slides(1)">❯</a>
</div>
<div class="dot-container">
<span class="custom-dot" onclick="activeSlides(1)"></span>
<span class="custom-dot" onclick="activeSlides(2)"></span>
<span class="custom-dot" onclick="activeSlides(3)"></span>
</div>
<script>
var index = 1;
displaySlides(index);
function slides(n) {
displaySlides(index += n);
}
function activeSlides(n) {
displaySlides(index = n);
}
function displaySlides(n) {
var i;
var allSlides = document.getElementsByClassName("image-container");
var allDots = document.getElementsByClassName("custom-dot");
if (n > allSlides.length) {
index = 1;
}
if (n < 1) {
index = allSlides.length;
}
for (i = 0; i < allSlides.length; i++) {
allSlides[i].style.display = "none";
}
for (i = 0; i < allDots.length; i++) {
allDots[i].className = allDots[i].className.replace(" active-dot", "");
}
allSlides[index - 1].style.display = "block";
allDots[index - 1].className += "active-dot";
}
</script>
</body>
</html> CSS 幻灯片画廊
以下示例演示一个简单的幻灯片画廊。图库中有多张图片，一次仅显示一张图片。
您可以单击左右箭头在图片之间移动。
这是一个例子 -
<html>
<head>
<style>
.slideshow-container {
position: relative;
width: 100%;
overflow: hidden;
}
.image-gallery {
display: flex;
transition: transform 0.5s ease-in-out;
}
.image-container {
width: 100%;
height: 100%;
}
.image-container img {
width: 100%;
height: 100%;
}
.prev-img, .next-img {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
}
.next-img {
right: 0;
}
.prev-img:hover, .next-img:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.bottom-img-container {
text-align: center;
margin-top: 20px;
}
.bottom-img {
height: 80px;
width: 80px;
margin: 0 10px;
cursor: pointer;
opacity: 0.5;
}
.bottom-img.current-bottom-img {
opacity: 1;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="image-gallery">
<div class="image-container">
<img src="/css/images/scenery.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="/css/images/scenery3.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="/css/images/scenery4.jpg" alt="Orange Flower">
</div>
</div>
<a class="prev-img" onclick="slides(-1)">❮</a>
<a class="next-img" onclick="slides(1)">❯</a>
</div>
<div class="bottom-img-container">
<img class="bottom-img current-bottom-img" src="/css/images/scenery.jpg" onclick="activeSlides(1)">
<img class="bottom-img" src="/css/images/scenery3.jpg" onclick="activeSlides(2)">
<img class="bottom-img" src="/css/images/scenery4.jpg" onclick="activeSlides(3)">
</div>
<script>
var index = 1;
displaySlides(index);
function slides(n) {
displaySlides(index += n);
}
function activeSlides(n) {
displaySlides(index = n);
}
function displaySlides(n) {
var i;
var allSlides = document.getElementsByClassName("image-container");
var allThumbnails = document.getElementsByClassName("bottom-img");
if (n > allSlides.length) {
index = 1;
}
if (n < 1) {
index = allSlides.length;
}
for (i = 0; i < allSlides.length; i++) {
allSlides[i].style.display = "none";
}
for (i = 0; i < allThumbnails.length; i++) {
allThumbnails[i].className = allThumbnails[i].className.replace(" current-bottom-img", "");
allThumbnails[i].style.filter = "brightness(50%)";
}
allSlides[index - 1].style.display = "block";
allThumbnails[index - 1].className += " current-bottom-img";
allThumbnails[index - 1].style.filter = "brightness(100%)";
}
</script>
</body>
</html>