2 动态图像 - 不同宽度相同高度

Question

如何在行中获得 2 个不同宽度到相同高度的动态图像并保持它们的纵横比。

换句话说 -> 我希望高度由较长的图像确定，所以第二个只是填充空间，直到它们的大小相同。

如果不手动设置比率，我就是找不到办法。

有什么想法吗？

非常感谢

Answer 1

您可以通过 jQuery 将第一个图像高度样式设置为第二个：

 $(document).ready(function() {
     var FirstImgHeight = $(".firstImg").height();
     // alert(FirstImgHeight );

     $(".secondImg").css("max-height", FirstImgHeight)
 })


        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%
        }


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">

        <div class="row">
            <div class="col-sm-7">
                <img class="firstImg"
                    src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300" />
            </div>
            <div class="col-sm-5">
                <img class="secondImg" src="https://webmeup.com/upload/blog/lead-image-105.png" />
            </div>
        </div>
    </div>

Answer 2

遗憾的是，我研究的两种解决方案都没有解决这个问题，但我想分享我所拥有的可能激发其他答案的东西。 （我建议您单击“整页”以正确查看这些演示；注意两个示例图像的尺寸不同）。

基本的 flexbox 设置会破坏纵横比：

.images {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
 }
.images > .img { position: relative; }
.images > .img > img { height: 100%; }

<div class="images">
  <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/bison-image-680x425.jpg" />
  <img src="https://cdn101.picsart.com/208783124002202.jpg?type=webp&to=min&r=640" />
</div>

在每个图像周围使用额外的包装器会导致一种有趣的情况，即保留纵横比，但无法应用边界：

.images {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
 }
.images > .img { position: relative; }
.images > .img > img { height: 100%; }

<div class="images">
  <div class="img">
    <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/bison-image-680x425.jpg" />
  </div>
  <div class="img">
    <img src="https://cdn101.picsart.com/208783124002202.jpg?type=webp&to=min&r=640" />
  </div>
</div>

如果您可以使用固定高度，height: 100% 可以快速解决此问题：

.images {
  position: relative;
  font-size: 0;
  height: 200px;
  white-space: nowrap;
}
.images > img { height: 100%; }

<div class="images">
  <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/bison-image-680x425.jpg" />
  <img src="https://cdn101.picsart.com/208783124002202.jpg?type=webp&to=min&r=640" />
</div>

Answer 3

这很好用 ->

// jquery on load
$(function() {
  $(".image-aspect-fit").each(function (index){
    const el = this;
    // new image object to get real width
      const image = new Image();
    image.onload = function () {
      const aspectRatio = image.width / image.height;
      el.style.flexGrow = aspectRatio;
      el.style.flexBasis = image.width / 100 + "px";
      el.style.width = image.width / 100 + "px";
      el.style.display = "block";
    }
    image.src = el.getAttribute("src");
  })
});

.image-container {
  display: flex;
}

.image-aspect-fit {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
<img src="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom.png" loading="lazy" sizes="100vw" srcset="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-500.png 500w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-800.png 800w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-1080.png 1080w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-1600.png 1600w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-2000.png 2000w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-2600.png 2600w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom.png 3840w" alt="Scooter - image top/bottom" class="image-aspect-fit">
  
<img src="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3.jpg" loading="lazy" sizes="100vw" srcset="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3-p-500.jpeg 500w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3-p-800.jpeg 800w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3.jpg 1576w" alt="guitar image
" class="image-aspect-fit">
</div>