【发布时间】：2021-04-22 18:49:38
【问题描述】：
我知道目前我们应该在<img> 元素上再次使用width 和height 属性，主要是为了避免或最小化布局偏移。当我在所有屏幕尺寸上都有相同尺寸的图像时，这可以正常工作。
但是遇到以下情况我该怎么办：
- 可变宽度/高度，可能只是 100%，因此是完整的容器宽度，并且容器会根据屏幕大小基本响应能力更改其尺寸）
- 相同，但图像本身具有设定尺寸但断点不同？
显然，我尝试在网上搜索答案，但在大多数情况下，我只能找到一些文章让我相信使用这些属性是多么重要，或者说，现在这很麻烦，但一旦aspect-ratio 会容易得多@在浏览器中引入和实现。所以，到目前为止不是很有用。
换句话说，假设我有一张图片：
- 100% 宽，
height: auto在移动断点上， - 20rem x 12rem 用于中等分辨率，
- 40rem x 24rem 用于大分辨率，
- 60rem x 36rem 用于 xlarge。
我会在width="X" height="X" 属性中添加什么？
【问题讨论】：
-
无论你放什么它都会起作用，导致 css 覆盖它。您可以将宽度 100% 高度 60% 并通过父容器控制它，这在大多数现实世界的情况下都是正确的 - check it out。
-
我知道它会覆盖它。但是使用属性的原因——也是我理解的唯一原因——是为了防止布局转移。把任何东西放在那里，知道它会被覆盖有点适得其反，甚至可能引发更大的转变。
-
不只是把原始图像尺寸和一些基本的img样式放在文档头，这可能是你能做的最好的。