时间戳

首页 > 解决方案 > 如何在 Wordpress 画廊中放置图像

wordpress - 如何在 Wordpress 画廊中放置图像

问题描述

当我使用 Wordpress 画廊简码 [gallery columns="3" size="medium" link="none" ids="13,14,11,16,18,19"] 它显示 3 列画廊，但图像高度不要在每一行上匹配，它会在全景图像下方留下难看的空间。

我怎样才能得到它，以便每行上所有图像的高度都相同，即使它会自动裁剪掉每张图像的某些侧面？

标签： wordpress

解决方案

如果您使用默认的 wordpress 图库标记，您可以通过添加这些 css 类来覆盖显示：

我们定义了一个固定的纵横比，用于包装画廊 div 并object-fit:用于填充框架。

在此示例中，我们使用平方比率。

.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 3em 0 3em -0.8em;
    width: 100%;
}

* {
    box-sizing: border-box
}

.gallery-item{
    width:33.333%;
    margin:0;
    padding:0.3em;
}


/* aspect ratio hack*/
.gallery-icon {
    position:relative;
    padding-bottom:100%;
    /* use 56.25% for 16/9 ration */
}

.gallery-icon a,
.gallery-icon img
 {
    position: absolute;
    top:0;
    right:0;
    bottom:0; 
    left:0;
    height:100%;
    width:100%
}

/* prevent distortions */
.gallery-icon img{
    object-fit:cover;
    object-position: 50%
}
<div id="gallery-1" class="gallery galleryid-716 gallery-columns-3 gallery-size-thumbnail">

<figure class="gallery-item">
    <div class="gallery-icon landscape">
        <img width="200" height="400" src="https://via.placeholder.com/200x400" class="attachment-thumbnail size-thumbnail" alt="thumb" >
    </div>
</figure>


<figure class="gallery-item">
    <div class="gallery-icon landscape">
        <img width="300" height="400" src="https://via.placeholder.com/200x100" class="attachment-thumbnail size-thumbnail" alt="thumb" >
    </div>
</figure>


<figure class="gallery-item">
    <div class="gallery-icon landscape">
        <img width="200" height="400" src="https://via.placeholder.com/400x100" class="attachment-thumbnail size-thumbnail" alt="thumb" >
    </div>
</figure>


<figure class="gallery-item">
    <div class="gallery-icon landscape">
        <img width="200" height="400" src="https://via.placeholder.com/200" class="attachment-thumbnail size-thumbnail" alt="thumb" >
    </div>
</figure>


</div>

您也可以使用 css 属性aspect-ratio:，但它仍未得到广泛支持。

推荐阅读