CSS: 自动计算元素的高度以匹配背景图像
CSS: auto calc height of element to match the background-image
我希望我网站的一部分（横幅）是适合所有宽度的图像，并且图像始终保持完整宽度（不是 px 宽度，而是百分比）。我不在乎高度太低，我需要图像始终显示所有宽度内容和自动高度。
我正在使用 background-size: contain，这会保留图像的整个宽度，但需要计算高度，因为容器高度会高于图像的高度。我试过使用视口单位，但它在不同的分辨率之间不一致（也许我做错了，但较高分辨率的值不适用于较低的分辨率）。
我如何使它具有响应性？
标记：
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>
我对这张图片使用 CSS，因为我们都（应该）知道，设计图片不属于标记。所以图像必须适合所有宽度，100% 和 100vw 之间有什么区别？第一个是父级的宽度，body 具有屏幕中的所有宽度，第二个是（又是？）设备的宽度？
这种方法是否与平板电脑和手机兼容？我应该使用针对这些情况优化的第二张图片吗？
为了计算元素的高度，我使用了一个计算高度同时保持纵横比的公式：
New height = New width / (Original width / Original height)
所以将其翻译成 css 得到：
section.feat-bottom {
height: calc(100vw / (1920px / 800px))
}
这种方法提供了流畅的缩放，因此不需要断点。
我希望我网站的一部分（横幅）是适合所有宽度的图像，并且图像始终保持完整宽度（不是 px 宽度，而是百分比）。我不在乎高度太低，我需要图像始终显示所有宽度内容和自动高度。
我正在使用 background-size: contain，这会保留图像的整个宽度，但需要计算高度，因为容器高度会高于图像的高度。我试过使用视口单位，但它在不同的分辨率之间不一致（也许我做错了，但较高分辨率的值不适用于较低的分辨率）。
我如何使它具有响应性？
标记：
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>
我对这张图片使用 CSS，因为我们都（应该）知道，设计图片不属于标记。所以图像必须适合所有宽度，100% 和 100vw 之间有什么区别？第一个是父级的宽度，body 具有屏幕中的所有宽度，第二个是（又是？）设备的宽度？
这种方法是否与平板电脑和手机兼容？我应该使用针对这些情况优化的第二张图片吗？
为了计算元素的高度，我使用了一个计算高度同时保持纵横比的公式：
New height = New width / (Original width / Original height)
所以将其翻译成 css 得到：
section.feat-bottom {
height: calc(100vw / (1920px / 800px))
}
这种方法提供了流畅的缩放，因此不需要断点。