Question

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

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

考虑到给每个图像一个最大宽度让我们说calc（3/100）我希望图像有更动态的实时宽度。

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

正如你在样本01中看到的那样，大图像可以获得很多宽度非常棒，而不那么宽的图像不会耗尽所有看起来非常棒的视图宽度。

正如你在样本02中看到的那样，当有两个宽图像对整个用户体验产生不良影响时，它会中断。

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

CSS

    .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;
    }

HTML

<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>

的Javascript？

所以基本上我需要搜索什么才能获得有关此类问题的信息？

这不是一个jQuery问题^^

Answer 1

首先，使用弹性工具箱使所有图片的高度相同，并根据宽高比选择宽度。

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

为简单起见，我在onclick上运行该函数，你可以在加载时调用它，或类似的。

＆＃13;

function resize () {
    var ctn = document.getElementById("container");
    var width = ctn.offsetWidth;
    var height = ctn.offsetHeight;
    var windowWidth = window.innerWidth - 50;
    var ratio = windowWidth / width;
    ctn.style.height = height * ratio + 'px';
}

＆＃13;

#container {
  border: solid 1px red;
  display: inline-flex;
  height: 200px;
}

.item {
  height: 100%;
}

＆＃13;

<div id="container" onclick="resize()">
<img src="http://lorempixel.com/400/200" class="item" />
<img src="http://lorempixel.com/400/300" class="item" />
<img src="http://lorempixel.com/400/400" class="item" />
</div>

＆＃13;

Javascript - 使用哪种逻辑？

1 个答案: