以全宽显示多张图片可以通过以下几种方式实现:
示例代码:
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
.image-container {
display: flex;
flex-wrap: wrap;
}
.image-container img {
width: 100%;
height: auto;
}
示例代码:
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
.image-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.image-container img {
width: 100%;
height: auto;
}
示例代码:
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
// 使用Masonry库
var container = document.querySelector('.image-container');
var masonry = new Masonry(container, {
itemSelector: 'img',
columnWidth: 300,
gutter: 10
});
以上是几种常见的方法来实现以全宽显示多张图片的效果。具体选择哪种方法取决于项目需求和开发者的偏好。
领取专属 10元无门槛券
手把手带您无忧上云