Question

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

<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>

Answer 1

您可以更改.gallery img CSS。如果您仅要显示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>

如何在Bootstrap中进行响应式画廊布局？

1 个答案: