等距图库图像缩略图

Question

我正在尝试创建一个画廊页面，我必须在其中放置数量可变的图像。例如，假设我以这种方式放置 6 张图像：

<link href="/stylesheets/gallery_gen.css" media="screen" rel="stylesheet" type="text/css">

<div class="my-gallery-contain" itemscope itemtype="http://schema.org/ImageGallery">

    <div class="my-gallery">
        <figure class="my-gallery-fig" classitemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/4.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/4.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
            <!--<figcaption itemprop="caption description"><p class="galleryCap">Image caption</p></    figcaption>-->
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/5.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/5.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/6.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/6.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/7.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/7.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/8.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/8.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/28.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/28.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
    </div>

</div>

CSS:

.my-gallery-contain {
    margin: -20px 0px -20px;
}

.my-gallery img {
    width: 300px;
    margin: 0;
    padding: 0;

}

.my-gallery-fig {
    margin: 2px;

    height: 200px;
    overflow: hidden;
    display: inline-block;

}

但是，只有第一行的间距相等。我得到的结果是这样的： https://i.imgur.com/XS6cerM.jpg

如果我有另一行，只有前两行的间距相等。最后一行总是不等距的。

我该如何解决这个问题？

另一个问题：如果我想在一张图片和旁边的图片之间留出 2px 的固定边距，我怎样才能让缩略图自动调整大小以适应 div？（在我发布的屏幕中，第二行有右边距，但图像应该自动调整大小以适应外部 div，这样右边图像的左边距与左边图像的右边距)

Answer 1

我不知道为什么图片之间没有 4px 的总边距。可能是由于 css 全局应用设置或仅容器应用，我需要更多代码才能知道到底出了什么问题。

要解决此问题并便于以后添加图像，您可以使用 css 网格和 flexbox 后备，适用于尚不支持网格布局的浏览器。

这两种方法都具有在未来更具响应性和可调整性的优势。

CSS 网格：

@supports (display: grid) {
    figure {
        padding: 0;
        margin: 0;
    }
    .my-gallery {
        display: grid;
        /* space between containers */
        grid-gap: 2px;
    }
    .my-gallery {
        grid-template-columns: repeat(3, 300px);
        grid-template-rows: 200px 200px;
        grid-template-areas: "img1   img2   img3" "img4   img5   img6";
    }
    /* positions */
    .my-gallery-fig:nth-child(1) { grid-area: img1; }
    .my-gallery-fig:nth-child(2) { grid-area: img2; }
    .my-gallery-fig:nth-child(3) { grid-area: img3; }
    .my-gallery-fig:nth-child(3) { grid-area: img4; }
    .my-gallery-fig:nth-child(3) { grid-area: img5; }
    .my-gallery-fig:nth-child(3) { grid-area: img6; }
    /* end of positions */
    .my-gallery-fig a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .my-gallery-fig img {
        display: block;
        width: auto;
        height: 100%;
        margin: auto;
    }
}

Flexbox 回退：

@supports not (display: grid) {
    figure {
        padding: 0;
        margin: 0;
    }
    /* width accounts for image size and margins */
    .my-gallery {
        display: flex;
        width: 904px;
        flex-flow: row wrap;
    }
    .my-gallery-fig {
        flex: 0 1 300px;
        height: 200px;
        margin: 0 2px 2px 0;
    }
    /* last image of every row has no right margin */
    .my-gallery-fig:nth-child(3n) {
        margin-right: 0;
    }
}

我根据你给出的尺寸做了编码。您将来应该可以调整尺寸以满足您的需要。

一些额外的资源：
MDN on CSS Grid
MDN on "flex"

希望对您有所帮助！

P.S：你可以试验一下：https://codepen.io/iamdeja/pen/zPwwXO

等距图库图像缩略图

Equally spaced gallery image thumbnails

html

css

image

thumbnails

gallery