高度可变的水平图像行

Question

我想用可变高度的固定宽度图像制作一个合理的图像库。不幸的是，我只能找到固定高度的合理画廊。

固定宽度而不是高度时，白色-space 会垂直出现在图像之间。

当前情况：http://redbird.driesbos.com/justified.html

应该变成：http://www.redbird.driesbos.com/Capture1.jpg

HTML

<section id="justified">  
    <a href="project-page1.html">
        <img src="img/justified1.jpg"/>
    </a>
    <a href="project-page2.html">
        <img src="img/justified2.jpg"/>
    </a>
</section>

CSS

#justified {
    padding: 30px;
    width: 95vw;
    text-align: center;
    margin: auto;
}

 #justified img {
    height: auto;
    width: 420px;
    display: inline-block;
    float: middle;
}

Answer 1

将宽度和高度都更改为 100%，以便所有图像具有相同的宽度和高度。

Answer 2

您可以为此使用同位素！

http://isotope.metafizzy.co/

Answer 3

将您的 a 设置为 display:inline-block; float:left - 它会消除空格

通过javascript检测链接的宽度并设置相同的高度：

document.addEventListener('DOMContentLoaded', function () {
    var el = document.querySelectorAll('.someClass')

    function setElHeight() {

        var elWidth = el[0].offsetWidth;
        for (i = 0; i < el.length; i++) {
            el[i].style["height"] = (elHeight + 'px');
        }
    }
    setElHeight();
});

我在 blog

中使用了这个概念

高度可变的水平图像行

horizontal image rows with variable height

html

css

grid

gallery