CSS，Bootstrap，HTML - 缩小响应图像以获得行中相同的大小

Question

我是 web 设计的新手，我在使用 class img-fluid 在特定视图中正确调整图像大小时遇到问题，在该视图中它们充当投资组合项目内的某种缩略图。 我将上传几张图片来解释我想要实现的目标。 第一张图片是我想要做的，每行大约 3-4 个相同大小的项目，问题是当我显示一个垂直大于水平的图像时，它也比其他图像获得更大的分辨率，弄乱了我的整行并添加一些空格

第二张图片说明了问题，2 是高度较大的图片，它会根据放置图片的 position 混淆其他元素。

这是 HTML 代码：

<div class="container-fluid">
    <div class="row">
            <div class="col-lg-4 col-sm-6 mb-2">
                <!-- Portfolio item -->
                <div class="portfolio-item">
                    <a class="portfolio-link" href="someurl">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                        </div>
                    <img class="img-fluid" src="sourceofimage" alt="default" height=auto/>
                    </a>
                    <div class="portfolio-caption">
                        <div class="portfolio-caption-heading">some text</div>
                        <div class="portfolio-caption-subheading text-muted">some text</div>
                    </div>
                </div>
            </div>
    </div>
</div>

和img-fluid的CSS

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

谁能帮我这个？

Answer 1

同时使用height和width 。 将宽度设置为您想要的像素数或任何其他增量，并且高度相同。

代码： https : //codepen.io/flvffywvffy/pen/OJjoeKP （忽略javascript）

Answer 2

在您的 Row 中，将每个图像放在一个 Col 中。

<div class=Row">
  <div class="col-sm-12 col-md-6 col-lg-4">
    Image one
  </div>
  repeat ^ that Div for additional images.
</div>

col lg 4将确保在大屏幕上显示 3 个宽图像。 col md 6将确保在中等屏幕上并排显示 2 个图像， col sm 12将确保在小屏幕上图像彼此重叠。 不需要 CSS。