CSS - 图片库

上一页
下一页

CSS 图片库是使用 CSS 显示的图像集合。CSS 可用于控制图像的布局、大小、间距和其他视觉属性。

CSS 图片库通常用于网站上，以视觉上吸引人的方式展示产品、投资组合或其他视觉内容。

要创建简单的图像库，您可以按照以下步骤操作：

  • 使用 HTML 容器元素，例如 <div>。
  • 将图像添加到容器元素中。您可以使用 <img> 标签来显示图像。
  • 每个图像都应该包裹在 <a> 标签中，以使其可点击。
  • 将 display： flex 属性添加到 div 容器元素中。
  • 添加 flex-flow： row wrap 属性，将 flex 容器的方向设置为 row。

简单图片库

以下示例显示了一个简单的图像库布局，该布局显示在一行中 -


<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/see.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>Resize the browser window 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/see.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/see.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 图像库

该示例显示如何使用 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="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">
	 	 	 <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>

具有垂直滚动功能的 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="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">
	 	 	 <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>

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="images/red-flower.jpg" alt="Red Flower">
	 	 	 </div>
	 	 	 <div class="image-container">
	 	 	 	 	<img src="images/white-flower.jpg" alt="White Flower">
	 	 	 </div>
	 	 	 <div class="image-container">
	 	 	 	 	<img src="images/orange-flower.jpg" alt="Orange Flower">
	 	 	 </div>
	 	 	 	 	<div class="image-container">
	 	 	 	 	<img src="images/red-flower.jpg" alt="Red Flower">
	 	 	 </div>
	 	 	 <div class="image-container">
	 	 	 	 	<img src="images/white-flower.jpg" alt="White Flower">
	 	 	 </div>
	 	 	 <div class="image-container">
	 	 	 	 	<img src="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="images/red-flower.jpg" alt="Red Flower" id="red">
	 	 	 </div>
	 	 	 <div class="image-container" onclick="opentab('white')">
	 	 	 	 	<img src="images/white-flower.jpg" alt="White Flower" id="white">
	 	 	 </div>
	 	 	 <div class="image-container" onclick="opentab('orange')">
	 	 	 	 	<img src="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="images/scenery.jpg" alt="Red Flower">
	 	 	 	 	</div>
	 	 	 	 	<div class="image-container">
	 	 	 	 	 	 <img src="images/scenery3.jpg" alt="White Flower">
	 	 	 	 	</div>
	 	 	 	 	<div class="image-container">
	 	 	 	 	 	 <img src="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="images/scenery.jpg" alt="Red Flower">
	 	 	 	 	</div>
	 	 	 	 	<div class="image-container">
	 	 	 	 	 	 <img src="images/scenery3.jpg" alt="White Flower">
	 	 	 	 	</div>
	 	 	 	 	<div class="image-container">
	 	 	 	 	 	 <img src="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="images/scenery.jpg" onclick="activeSlides(1)">
	 	 	 <img class="bottom-img" src="images/scenery3.jpg" onclick="activeSlides(2)">
	 	 	 <img class="bottom-img" src="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>
打印本页
上一页
下一页