具有相同高度的响应照片[重复]答案

【问题标题】：Resposive photos with same height [duplicate]具有相同高度的响应照片[重复]
【发布时间】：2021-10-14 05:16:57
【问题描述】：

如何设置相同的高度并保持比例？

当我设置高度（例如 70vh）时，我有我想要的，但图像不成比例：

当我设置高度时：自动；图像具有响应性和比例性，但具有不同的高度：

我可以将两者结合起来并保持相同的高度并保持比例吗？

HTML：

<main>

<div class="container-fluid">

    <div class="row first-row justify-content-center">

        <div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">

            <a href="img/projects/home/1.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
            
        </div>

        <div class="flex-wrap col-6 col-xlg-8 col-lg-6 col-12 col-md-6">

            <a href="img/projects/home/3.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test1.jpg" class="img-fluid img"></a>
            
        </div>

        <div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">

            <a href="img/projects/home/2.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
            
        </div>

</div>

CSS：

 .first-row div img
    {
        max-width: 100%;
        height: auto;
    }

【问题讨论】：

嘿，你的问题更具体一点，我没有得到你需要的东西？
我想要和第一个 ss 一样的高度，但第二张图片的比例。当我设置相同高度时，照片会分崩离析。

标签： html css bootstrap-5 image-scaling

【解决方案1】：

尝试在 div 元素上使用图片作为背景图片：

HTML：

<div class="bg-cover-center" style='background-image: url("img/projects/home/1.jpg");'></div>

CSS：

.bg-cover-center {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

别忘了设置 width 或 min-width 否则 div 宽度将是 0 因为它没有内容

【讨论】：

【解决方案2】：

display: flex 分配给父 div，然后分配 height 并将 width: auto 放入图像。

【讨论】：