时间戳

首页 > 解决方案 > CSS、Bootstrap、HTML - 缩小响应式图像以在行中获得相同大小

html - CSS、Bootstrap、HTML - 缩小响应式图像以在行中获得相同大小

问题描述

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

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

这是 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;
}

谁能帮我这个 ？

标签： htmlcssbootstrap-5

解决方案

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

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

推荐阅读