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

Question

I would like to take the biggest image height from the page and make all the images at same height by using images placeholders or something, also to be responsive: desktop / mobile / table

Most important, we speak about images. I have an image with 600px height and another one with 300px height. Lets take this scenario:

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

In this scenario, I want to check entire page for the biggest height and put it on all images as a transparent background with the main image in the middle. I don't have nothing did on this because I don't know what to do and I kindly ask for help here. Thanks

Answer 1

If you want to make the images responsive for Desktop, Mobile, Tablet, you could set the width to use 65vw instead of 350px .

Example:

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

I think you could do something with JavaScript to search through each image's properties to find the biggest image height.. Or if you set it yourself that would be easier.

Answer 2

Use background images and a nested div to set the aspect ratio.

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