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

Question

我正在尝试修复灯塔警告“图像元素没有明确的宽度和高度”，以减少布局偏移并提高CLS。问题是，当我在可湿性粉剂网站上创建我的页面时，我使用了引导网格，并且没有将这些属性添加到图像中，所以它们在所有屏幕上都可以很好地调整大小。现在，如果我添加宽度和高度属性，图像在移动设备上的缩放不正确，则不会考虑初始长宽比。我最担心的是图像非常不同，宽高比也非常不同。这是我找到的唯一有效的解决方案，但我不认为它真的很优雅，我猜应该有更多……简单？

下面是一段进入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

所以我试着使用它，我发现如果你有宽度和高度属性，当你有

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

希望它也能帮助其他人！