在响应式图像的 <img> 元素上设置宽度和高度属性
Setting width and height attributes on <img> element on responsive images
我知道目前我们应该在 <img> 元素上再次使用 width 和 height 属性，主要是为了避免或最小化布局偏移。当我的图像在所有屏幕尺寸上具有相同的设置尺寸时，这就可以正常工作。
但是遇到以下情况怎么办：
- 流畅 width/height，可能只是 100%，所以整个容器宽度，并且容器根据屏幕尺寸基本响应改变其尺寸）
- 相同，但图像本身具有设置的尺寸但断点不同？
显然，我试着在网上搜索答案，但在大多数情况下，我只能找到让我相信使用这些属性有多么重要的文章，或者，这现在很麻烦，但一旦 aspect-ratio 在浏览器中引入并实现。所以，到目前为止不是很有用。
换句话说，假设我有一张图片是：
- 100% 宽，
height: auto 在移动断点上，
- 20rem x 12rem 适用于中等分辨率，
- 40rem x 24rem 大分辨率，
- 60rem x 36rem 用于超大尺寸。
我应该在 width="X" height="X" 属性中输入什么？
好的，经过相当广泛的研究和实验后，我发现，事实上，只要保持纵横比不变，这并不重要。所以最好的办法可能是使用图像的原始尺寸。
我知道目前我们应该在 <img> 元素上再次使用 width 和 height 属性，主要是为了避免或最小化布局偏移。当我的图像在所有屏幕尺寸上具有相同的设置尺寸时，这就可以正常工作。
但是遇到以下情况怎么办：
- 流畅 width/height，可能只是 100%，所以整个容器宽度，并且容器根据屏幕尺寸基本响应改变其尺寸）
- 相同，但图像本身具有设置的尺寸但断点不同？
显然，我试着在网上搜索答案，但在大多数情况下，我只能找到让我相信使用这些属性有多么重要的文章，或者，这现在很麻烦，但一旦 aspect-ratio 在浏览器中引入并实现。所以，到目前为止不是很有用。
换句话说，假设我有一张图片是：
- 100% 宽，
height: auto在移动断点上， - 20rem x 12rem 适用于中等分辨率，
- 40rem x 24rem 大分辨率，
- 60rem x 36rem 用于超大尺寸。
我应该在 width="X" height="X" 属性中输入什么？
好的，经过相当广泛的研究和实验后，我发现，事实上，只要保持纵横比不变，这并不重要。所以最好的办法可能是使用图像的原始尺寸。