Question

我正在尝试修复 Lighthouse 警告“图像元素没有明确的宽度和高度”，以减少布局偏移并改进 CLS。问题是，当我在 WP 站点上创建页面时，我使用了引导网格并且没有将这些属性添加到图像中，因此它们在所有屏幕上都可以很好地调整大小。现在，如果我添加宽度和高度属性，图像在移动设备上无法正确缩放，则不遵守初始纵横比。我最担心的是图像非常不同，纵横比也非常不同。这是我找到的唯一可行的解决方案，但我认为它不是很优雅，猜想应该有更...简单的东西？

所以这是进入 css 的一段代码：

[style*="--aspect-ratio"]>:first-child {
    width: 100%
}

[style*="--aspect-ratio"]>img {
    height: auto
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative
    }

    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)))
    }

    [style*="--aspect-ratio"]>:first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%
    }
}

而且我必须手动为每个图像添加一个父div，指示宽/高比：

<div style="--aspect-ratio:804/476">
        <img src="/app/uploads/2020/06/picture.png" alt="alt text" width="804" height="476" />
</div>

任何帮助将不胜感激！

Answer 1

所以我在玩弄它，我发现如果你有 width 和 height 属性，当你有时，图像会正确调整大小

img {
max-width: 100%
height: auto
}

希望它也能帮助别人！

使用 CSS 为小屏幕保持图像的纵横比

1 个答案: