Question

我想从页面上获取最大的图像高度，并使用图像占位符或其他类似的东西使所有图像都处于同一高度，同时也要响应：台式机/移动设备/桌子

最重要的是，我们谈论图像。我有一幅高度为600px的图像，另一幅高度为300px。让我们来考虑这种情况：

<div id="images">
    <img src="" alt="" width="350" height="600">
    <img src="" alt="" width="350" height="200">
    <img src="" alt="" width="350" height="350">
    <img src="" alt="" width="350" height="450">
    <img src="" alt="" width="350" height="350">
    <img src="" alt="" width="350" height="150">
    <img src="" alt="" width="350" height="350">
    <img src="" alt="" width="350" height="350">
    <img src="" alt="" width="350" height="550">
    <img src="" alt="" width="350" height="350">
</div>

在这种情况下，我要检查整个页面的最大高度，并将其作为透明背景放在所有图像上，并将主图像放在中间。我对此没有做任何事情，因为我不知道该怎么办，请在这里寻求帮助。谢谢

Answer 1

如果要使图像响应于台式机，移动设备和平板电脑，则可以将宽度设置为使用65vw而不是350px。

示例：

<img src="https://en.wikipedia.org/wiki/File:Googlelogo.png" alt="" style="width:50vw">

我认为您可以使用JavaScript进行某些操作，以搜索每个图像的属性以找到最大图像高度。或者，如果您自己进行设置，那会更容易。

Answer 2

使用背景图像和嵌套的div来设置纵横比。

#images .image {
width: 350px; 
max-width: calc(50% - 5px);
float: left;
margin: 0 5px 5px 0;
display: inline-block; 
background-color: black;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
#images .image div {padding-top: 100%;}

<div id="images">
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat.jpg);"><div></div></div>
    <div class="image" style="background-image: url(https://jekyllcodex.org/uploads/grumpycat2.jpg);"><div></div></div>
</div>

以div的最大尺寸并使其全部相同

2 个答案: