CSS：自动计算元素的高度以匹配背景图像答案

【问题标题】：CSS: auto calc height of element to match the background-imageCSS：自动计算元素的高度以匹配背景图像
【发布时间】：2017-09-04 19:28:25
【问题描述】：

我希望我网站的一部分（横幅）成为适合所有宽度的图像，并且图像始终保持完整宽度（不是 px 宽度，而是百分比）。我不在乎高度太低，我需要图像始终显示所有宽度内容和高度为自动。

我正在使用background-size: contain，这会保留图像的全宽，但需要计算高度，因为这样容器高度会高于图像的高度。我试过使用视口单位，但不同分辨率之间不一致（也许我做错了，但高分辨率的值不适用于较低的分辨率）。

如何让这个响应式响应？

标记：

<body>
    <section class="feat-bottom">
        <h4>some title</h4>
    </section>
</body>

我对这张图片使用 CSS，因为我们都（应该）知道，设计图片不属于标记。所以图像必须适合所有宽度，100% 和 100vw 之间有什么区别？第一个是父级的宽度，body 具有屏幕中的所有宽度，第二个是（再次？）设备的宽度？

这种方法是否与平板电脑和手机兼容？我应该使用针对这些情况优化的第二张图片吗？

【问题讨论】：

【解决方案1】：

为了计算元素的高度，我使用了一个在保持纵横比的同时计算高度的公式：

New height = New width / (Original width / Original height)

因此将其翻译成 css 给出：

section.feat-bottom {
    height: calc(100vw / (1920px / 800px))
}

这种方法提供了流体缩放，因此不需要断点。

【讨论】：