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

Question

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

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

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

有任何想法吗？

非常感谢

标签： cssimageresponsive

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>