加载图像时CSS列布局闪烁答案

【问题标题】：CSS Column Layout flashing when loading image加载图像时CSS列布局闪烁
【发布时间】：2020-08-04 21:16:51
【问题描述】：

我正在使用CSS3 Multiple Columns 属性来实现类似Pinterest 的布局（由Bootstrap Cards Columns 实现）。首次加载图像时，每个图像卡都会闪烁，因为浏览器正在尝试计算/重新排列列中的每个图像，如下所示：

我想实现类似 Pinterest 的体验，就像在下载图像之前，卡片以正确的大小设置在正确的位置，并等待图像填充。是否有可能以某种方式提示/在 html/css 中预设图像大小或比例？（这些图像的实际尺寸大于显示尺寸，我尝试将 HTML 中的宽度/高度属性设置为实际尺寸，但效果不佳。）

当前的 HTML 是这样的：

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="https://i.stack.imgur.com/78vXO.gif" loading="lazy">
  </div>
  ... more card elements
</div>

.card-column 样式如下：

.card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
}

【问题讨论】：

标签： html css

【解决方案1】：

您可以为图像添加 min-width 和 min-height 属性。或者您可以使用 object-fit: 'cover' 设置宽度和高度

【讨论】：

【解决方案2】：

我通过检查 Pinterest 的布局找到了解决方案：

在图像周围添加<div> 包装器，并将 div 包装器的顶部填充设置为 image.height / image.width 。例如：div-wrapper: { padding-top: 135%; }
制作图片position: absolute;。

通过这种方式可以使用图像的比例预先定义容器，并且可以很好地计算列。

【讨论】：