html - 图片在其容器上的纵横比

Question

我知道有类似的问题，它们都是老问题，我想知道是否有更新的技术。

我有以下 HTML:

<figure class="main-slider__slide">
<img class="main-slider__image" src="http://smth.com/a.jpg" alt="test">
</figure>

我需要的是 figure 容器在 img 尚未加载时为它留出空间。如果没有容器保留空间，我最终会看到抽搐的内容，感觉很糟糕。

到目前为止，我已经想出了以下 SASS 混入:

@mixin image-placeholder($x,$y, $image-wrapper-class,$image-class) {
  .#{$image-wrapper-class} {
    position: relative;
    padding-bottom: percentage($y/$x);
  }

  .#{$image-class} {
    position: absolute;
  }
}

像 @include image-placeholder(1170, 405, main-slider__slide, main-slider__image); 一样被应用，它生成像这样的 CSS

.main-slider__slide {
  position: relative;
  padding-bottom: 34.61538%; 
}

.main-slider__image {
  position: absolute; 
}

问题是我必须在样式中确定图像的大小，并为每个具有特定尺寸的图像设置一个单独的类。你们知道更好的解决方案，一个通用的占位符类可以解决问题吗？

Answer 1

正如我在上面的评论中所写 - 我怀疑是否存在允许您获取有关尚未加载的元素的信息的通用解决方案。

然而，模仿这种行为是可能的。

想到的一件事是让要加载的图像的微小调整版本内联到文档中，然后在页面加载时替换为实际图像。例如。您的 1170x405 图像可以压缩 20 倍至 50x20，这将为您提供约 1kb 的 jpeg 图像大小。此图像可能存储为 <img src="data:" class="image-placeholder">直接进入文档并临时替换您的实际图像。您可以使用 CSS 将其缩放到原始大小，并通过 JavaScript 或允许浏览器加载它而不显示或将其直接放在占位符上来加载原始图像。申请 filter: blur(10px) 也很有用或类似这样的图像占位符，这样它看起来就不会难看。实际上，您甚至可以为该滤镜值设置动画，以提供从缩小的占位符到原始图像的令人愉悦的视觉过渡。

我已经在我的一个元素中使用了这种方法，并且效果很好。

希望对你有所帮助。