html - 可以调整高度并保持 block 元素的纵横比，例如仅使用 CSS 的图像吗？

Question

我的问题或多或少是相同的to this question ，但略有不同，我需要垂直调整它的大小。

我的意思是；根据我链接到的文章中提供的信息，如果您拉伸(stretch)/收缩浏览器宽度，DIV 将在保持纵横比的同时调整大小，但如果您使浏览器窗口更高/更短(即, 它的高度) - 我想知道是否可以在纯 CSS 环境中实现它。

TYIA。

Answer 1

如果您只处理一张图片，则将其宽度设置为 100% 并移除其高度将保持其宽高比，但显然也会降低其在大拉伸(stretch)时的质量。

像这样:

img {
    width: 100%;
    height: auto;
}