Javascript-这使用哪种类型的逻辑？

好吧，我不知道要搜索什么来获取关于如何解决这个问题的信息

基本上每天都会有3张随机图像，但它们的总数不得超过xvw（etc 100vw）

与其给每个图像一个最大宽度，比如calc（3/100），我想给图像一个更动态的实时宽度

示例（向下滚动查看示例02）

正如您在示例01中所看到的，这真是太棒了，大图像可以占据很大的宽度，而没有那么宽的图像不会占用所有看起来非常好的视图宽度

正如您在示例02中看到的，当有两个宽图像时，它会有点中断，这会对整个用户体验造成不良影响

所以，如果这3幅图像超过100vw，我需要相应地设置它们的最大宽度？但我如何检查这个

CSS

HTML

Sample 01
样本02

Javascript

那么基本上我需要搜索什么来获取关于这类问题的信息呢

---

这不是一个jQuery问题^ ^

首先，使用flexbox让所有图片拍摄相同的高度，并根据其纵横比设置宽度

现在，使用一个小函数重新计算容器的高度，以便新的宽度适合可用空间（在本例中为窗口）

为了简单起见，我在onclick上运行这个函数，您可以在加载时调用它，或者类似的方法

函数调整大小（）{
var ctn=document.getElementById（“容器”）；
var宽度=ctn.offsetWidth；
var高度=ctn离地高度；
var windowWidth=window.innerWidth-50；
var比率=窗宽/窗宽；
ctn.style.height=高度*比率+px'；
}

#容器{
边框：实心1px红色；
显示：内联flex；
高度：200px；
}
.项目{
身高：100%；
}

您可以将属性：

flex:1

添加到CSST中的图像中。这只占用剩余高度，这不是我想要的。。。。我需要3个图像在一行中，无论它们有多宽，所以它们不会弯曲包裹：包裹ish:），所以它们的最大宽度必须相应地调整，但仍然使最宽的图像占据尽可能多的空间

    .wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100vw;
        height: 100vh;
        background-color: #eee;
    }
    .wrapper img{
        max-width: 50vw;
        max-height: 50vh;
    }

<h2>Sample 01</h2>
<div class="wrapper">
    <img src="img4.jpg" alt="#">
    <img src="img2.jpg" alt="#">
    <img src="img3.jpg" alt="#">
</div>
<h2>Sample 02</h2>
<div class="wrapper">
    <img src="img4.jpg" alt="#">
    <img src="img5.jpg" alt="#">
    <img src="img3.jpg" alt="#">
</div>