html - 在响应式图像的 <img> 元素上设置宽度和高度属性

Question

我知道目前我们应该使用 width和height <img> 上的属性再次元素，主要是为了避免或最小化布局变化。当我的图像在所有屏幕尺寸上都具有相同的设置尺寸时，这可以正常工作。

但是在以下情况下我该怎么办:

• 流体宽度/高度，可能只是 100%，因此完整的容器宽度，并且容器根据屏幕尺寸基本响应能力更改其尺寸)
• 相同，但图像本身已设置尺寸但断点不同？

显然，我尝试在网上寻找答案，但在大多数情况下，我只能找到让我相信使用这些属性有多么重要的文章，或者，这现在很麻烦，但一旦 aspect-ratio 就会容易得多在浏览器中引入并实现。所以，到目前为止还不是很有用。

换句话说，假设我有一张图像:

• 100% 宽，height: auto在移动断点上，
• 中等分辨率为 20rem x 12rem，
• 40rem x 24rem 适用于大分辨率，
• 超大尺寸为 60rem x 36rem。

我会在 width="X" height="X" 中放入什么属性？

Answer 1

好吧，经过相当广泛的研究和实验，我发现，事实上，只要保留纵横比，这并不重要。因此，最好的选择可能是使用图像的原始尺寸。