时间戳

首页 > 解决方案 > 如何在引导程序中制作响应式画廊布局？

javascript - 如何在引导程序中制作响应式画廊布局？

问题描述

我制作了画廊，但是一旦我调整窗口大小，图像就会开始堆叠。如何使每个屏幕尺寸的布局保持不变？

<div class="container"> 
    <div class="gallery">
        <a href="images/tepihg1.jpg" data-lightbox="mygallery" data-title="Tepih1"> <img src="images/tepihg1.jpg" class="img-fluid"> </a>
        <a href="images/tepihg2.jpg" data-lightbox="mygallery" data-title="Tepih2"> <img src="images/tepihg2.jpg" class="img-fluid"> </a>
        <a href="images/tepihg3.jpg" data-lightbox="mygallery" data-title="Tepih3"> <img src="images/tepihg3.jpg" class="img-fluid"> </a>
    </div>
</div>

<style>
.gallery {
    margin: 30px 0 50px;

}
.gallery img {
    max-width: 200px; 
    height: 200px;
    object-fit: cover;
    padding: 5px;
}

.gallery img:hover{
    transform: scale(1.1);
}
</style>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

您可以更改.gallery imgCSS。如果您只显示 3 张图像。最大宽度必须是 33.33% 减去填充。检查这个片段。

<div class="container"> 
    <div class="gallery">
        <a href="images/tepihg1.jpg" data-lightbox="mygallery" data-title="Tepih1"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
        <a href="images/tepihg2.jpg" data-lightbox="mygallery" data-title="Tepih2"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
        <a href="images/tepihg3.jpg" data-lightbox="mygallery" data-title="Tepih3"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
    </div>
</div>

<style>
.gallery {
    margin: 30px 0 50px;

}
.gallery img {
    max-width: calc(33.3333% - 20px);
    object-fit: cover;
    padding: 5px;
}

.gallery img:hover{
    transform: scale(1.1);
}
</style>

推荐阅读