等距画廊图像缩略图

Posted 2023-03-29

【中文标题】等距画廊图像缩略图

【英文标题】：Equally spaced gallery image thumbnails

【发布时间】：2018-04-25 06:39:07

【问题描述】：

我正在尝试创建一个画廊页面，我必须在其中放置数量不定的图像。例如，假设我以这种方式放置 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"  />
            </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"  />
            </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"  />
            </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"  />
            </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"  />
            </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"  />
            </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？ （在我发布的scree中，第二行有右边距，但是图像应该自动调整大小以适应外部div，以便右侧图像的左边距与右边距相同左图）

【参考方案1】：

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

你可以做些什么来解决这个问题，也为了方便以后添加图像，是为尚不支持网格布局的浏览器使用带有 flexbox 后备的 css 网格。 这两种方法都具有响应速度更快以及将来更易于调整的优点。

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 GridMDN on "flex"

我希望这会有所帮助！

P.S：你可以试试这个：https://codepen.io/iamdeja/pen/zPwwXO

【讨论】：

这似乎可行，除了：1）垂直数字没有按预期裁剪；这是裁剪垂直缩略图的命令（我希望它们始终为 3:2 纵横比）： .my-gallery-fig height: 200px;溢出：隐藏； 2）这 3 个图像仍然没有在主容器 div 内居中 3）如果我调整浏览器的大小，如果窗口缩小太多，主容器（绿色的）就会消失......

此外，图像的数量由 javascript 代码确定，该代码从某些文件夹动态导入它们。所以我不能像你使用 " .my-gallery-fig:nth-child(1) grid-area: img1; " 指定位置

哦，我明白了，我会看看我能不能适应这个。你能添加绿色容器的代码吗？我或许能明白为什么您的图库图片无法按预期工作。

div.box_main_1 background-color: #e0ffcb; display: inline-block; position: relative; border: solid grey; border-width: 0 1px 1px; width: 1012px !important; min-height: 100vh; padding: 90px 30px 30px 30px; 非常感谢您的宝贵帮助！

顺便说一句，我通过将Width: 100% 设置为.my-gallery-fig img 并将height: 200px; 设置为.my-gallery-fig 设法解决了“裁剪”问题。我不知道它是否与它有关，但这似乎也解决了重新调整浏览器时绿色 div 消失的问题。尽管如此，仍然坚持居中问题..