CSS:自动计算元素高度以匹配背景图像
CSS:自动计算元素高度以匹配背景图像
提问于 2017-07-28 04:15:59
我想我的网站(横幅)的一部分，以适合所有宽度的图像，并为图像保持完整的宽度(不是像素宽度，但在百分比)在任何时候。我不关心的高度太低，我需要的图像总是显示所有的宽度内容和高度是自动的。
我使用的是background-size: contain，它保持了图像的全宽，但需要计算高度，因为这样容器的高度就会高于图像的高度。我尝试过使用视口单位，但在不同的分辨率之间并不一致(可能我做错了，但较高分辨率的值不适用于较低的分辨率)。
我该如何响应呢？
标记：
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>我对这张图片使用CSS，因为我们都知道，设计图片不属于标记。所以图像必须适合所有的宽度，100%和100vw之间的区别是什么？第一个是父母的宽度，body在屏幕上有所有的宽度，第二个是(又是？)设备的宽度是多少？
这种方法与平板电脑和手机兼容吗？我是否应该使用针对这些情况优化的第二个映像？
Stack Overflow用户
回答已采纳
发布于 2017-09-04 19:28:26
为了计算元素的高度，我使用了一个公式来计算高度，同时保持纵横比：
New height = New width / (Original width / Original height)因此，将其转换为css会得到以下结果：
section.feat-bottom {
height: calc(100vw / (1920px / 800px))
}这种方法提供了一种流畅的缩放，因此不需要断点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45360266
复制相关文章
相似问题
腾讯云开发者
