Question

我使用bootstrap4网格创建了一个图库，每6个图像是一行，如果6个图像中的一个比其他图像高，整行的图像也变得更高，我想设置一个固定大小的行，所以图像只是调整大小，我使用css

height: 100%; width 100%;

使其填充行的大小，因为如果我不是所有图像都将在其真实高度和宽度处统计并变为质量。

<body>
    <div class="container">
        <div class="row no-gutters">
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="tall-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-2">
                <img src="normal-image.jpg" alt="" class="img-fluid">
            </div>
        </div>
    </div>
</body>

Answer 1

您可以添加自定义css

.img-fluid{ max-width:100%; max-height:100px; }

Answer 2

我可能只是在图片中添加一个CSS类，你想要的最后一件事就是图片上传并覆盖整个网站。

img.img-fluid {
 height: 250px;
}

Bootstrap 4个相等高度的行

2 个答案: