gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:23:31 26 4
gpt4 key购买 nike

我希望我网站的一部分(横幅)是适合所有宽度的图像,并且图像始终保持完整宽度(不是 px 宽度,而是百分比)。我不关心高度太低,我需要图像始终显示所有宽度内容和自动高度。

我正在使用 background-size: contain 这会保持图像的整个宽度,但需要计算高度,因为这样容器的高度将高于图像的高度。我试过使用视口(viewport)单位,但它在不同的分辨率之间并不一致(也许我做错了,但较高分辨率的值不适用于较低的分辨率)。

我要如何让它响应?

标记:

<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))
}

这种方法提供了流畅的缩放,因此不需要断点。

关于html - CSS:自动计算元素的高度以匹配背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45360266/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com