当最大宽度小于真实宽度时保持图像长宽比

Question

我有一个大图像，其 CSS 中的宽度由 width: 1024px 设置，并且还由 max-width: 100% 控制。高度也以 px 为单位指定，以便浏览器第一次正确渲染页面而无需重新渲染。在我看来，这确实是非常明智的。但是，如果最大宽度小于 1024，我该怎么办，因为我被告知以 px 为单位指定的高度会导致图像以扭曲的宽高比显示？如果我设置 height: auto，我假设这会解决问题，但我也假设将会重新渲染。这是正确的吗？如果是的话，有什么办法可以解决这个问题吗？

Answer 1

这是一本有趣的读物。本文建议在 CSS 中使用

height: auto

并在 HTML 中添加

width

和

height

属性，然后浏览器可以在下载图像本身之前自动计算正确的宽高比。没有布局变化。