Question

我在col-md-6行的一列内有一个图形，所以每行2张图像。用户可以上传自己的图像，但我不会将其裁剪为特定的尺寸，而是以任何尺寸上传它们。

在前端，尽管这会导致图像变高。图像的高度不一样，看起来很糟糕。它们在行中的高度都应相等，而不会扭曲图像或裁剪宽度。

<div class="row">
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 1</h1><img
                    src="http://localhost:3000/userimg1.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 2</h1><img
                    src="http://localhost:3000/userimg2.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 3</h1><img
                    src="http://localhost:3000/userimg3.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 4</h1><img src="http://localhost:3000/userimg4.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
</div>

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

到目前为止，我尚未为meal-photo设置任何样式。

Answer 1

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

这实际上告诉了这个班级。当您输入height: auto;时，元素将自动调整其height以使其内容正确显示。因此，它将距您的真实图像高度。

现在您有办法：您不需要使用相同尺寸的图像。只需保持宽高比即可。 col-md-6和img-fluid将根据您的屏幕进行调整。

引导图形/行中图像的高度相等

1 个答案: