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

【问题标题】：Maintain the aspect ratio of an image with CSS for small screens使用 CSS 为小屏幕保持图像的纵横比
【发布时间】：2021-07-22 17:42:48
【问题描述】：

我正在尝试修复 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>

任何帮助将不胜感激！

【问题讨论】：

不完全确定是什么问题导致您执行此解决方法？您是说小屏幕（完全不同的图像）与大屏幕上的宽高比不同？如果您使用相同的图像并且只是缩放它，那么您不需要所有包装 div 的东西，只需将 width 和 height 属性添加到每个图像（可以在服务器端完成）并确保在您的CSS 图像有 width: 100% 来填充它的父容器。如果这不是您描述的问题，您可能需要更好地解释/添加更多细节。

标签： html css performance image-scaling lighthouse

【解决方案1】：

所以我一直在玩它，我发现如果你有宽度和高度属性，当你有图像时，图像会正确调整大小

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

希望它也可以帮助其他人！

【讨论】：