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

我希望我的网站（横幅）的一部分是适合所有宽度和图像的图像以保持全宽（不是px宽度，但是以百分比表示）。我不在乎高度太低，我需要图像始终显示所有宽度内容和高度为自动。CSS：自动计算元素的高度以匹配背景图像

我使用的是background-size: contain，它保留了图像的整个宽度，但需要计算高度，因为那么容器高度将高于图像的高度。我试过使用视口单位，但它不同的决议之间不一致（也许我做错了，但更高分辨率的值不适用于较低的分辨率）。

我该如何做出响应？

的标记：

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

我使用CSS的这一形象，因为我们所有的（应该）知道，设计图像不标记归属。所以图像必须适合所有的宽度，100％和100vw之间的区别是什么？第一个是父母的宽度，身体拥有屏幕上的所有宽度，第二个是（再次？）设备的宽度？

此方法是否与平板电脑和手机兼容？我应该使用为这些情况优化的第二个图像吗？

2017-07-27 Chazy Chaz

为了计算元件的高度我使用其计算的高度，同时保持纵横比的公式为：

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

所以翻译到这一点的CSS给出：

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

这种方法提供流体扩展，因此不需要任何中断点。

2017-09-04 11:28:25

回答