我如何让一个div自动调整到背景的大小,我为它没有设置一个特定的高度(或最低高度)?


当前回答

我看了一些解决方案,它们都很棒,但我觉得我找到了一个非常简单的方法。

首先,我们需要从背景图像中获取比例。我们简单地将一个维度划分为另一个维度。然后是66.4%

当我们有图像比率时,我们可以简单地计算div的高度,将比率乘以视口宽度:

height: calc(0.664 * 100vw);

对我来说,它工作,正确设置div高度,并在窗口调整大小时更改它。

其他回答

我用jQuery解决了这个问题。直到新的CSS规则允许这种类型的行为,我发现这是最好的方法。

设置你的divs

下面是你想要显示背景的div(“hero”),然后是你想要覆盖在背景图像上方的内部内容/文本(“inner”)。你可以(也应该)将内联样式移动到英雄类中。我把它们留在这里,这样就可以快速和容易地看到应用到它的样式。

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

计算图像纵横比

接下来,通过将图像的高度除以宽度来计算图像的纵横比。例如,如果你的图像高度是660,宽度是1280,那么长宽比就是0.5156。

设置一个jQuery窗口大小调整事件来调整高度

最后,添加一个jQuery事件监听器来调整窗口大小,然后根据纵横比计算英雄div的高度并更新它。这种解决方案通常会在底部留下一个额外的像素,因为使用纵横比的计算不完美,所以我们在结果大小中添加一个-1。

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

确保它在页面加载时工作

您应该在页面加载时执行上面的resize调用,以便在一开始就计算出图像的大小。如果你不这样做,那么英雄div将不会调整,直到你调整窗口的大小。我设置了一个单独的函数来进行大小调整。下面是我使用的完整代码。

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

另一种可能效率较低的解决方案是将图像包含在设置为visibility: hidden;的img元素下。然后使周围div的背景图像与图像相同。

这将把周围的div设置为img元素中图像的大小,但将其显示为背景。

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

也许这有帮助,这不是一个确切的背景,但你能理解:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

最近引入的CSS纵横比属性(~2020-2021)是一个很好的方法来做到这一点,没有填充黑客,并支持所有常绿浏览器。

因为我们需要提前知道图像的纵横比,在很多情况下,你可以提前预先确定图像的尺寸比(但并不总是用户生成的内容),你可以硬编码一个单一的风格或内联css在必要的时候。

当宽度指定时,基于提供的比率(如果高度指定,则计算宽度),Aspect-ratio将计算高度。

div { 纵横比:3 / 2;/*公共比例,如800*600px图像*/ 宽度:200 px;/*计算的高度将是133.33px,这是宽度/纵横比*/ 背景:红色;/*因此任何图像出血显示*/ 背景图片:url (https://images.unsplash.com/photo - 1631163190830 - 8770 - a0ad4aa9?ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8&ixlib=rb 1.2.1&auto=format&fit=crop&w=200&q=80”); } < div > < / div >

我看了一些解决方案,它们都很棒,但我觉得我找到了一个非常简单的方法。

首先,我们需要从背景图像中获取比例。我们简单地将一个维度划分为另一个维度。然后是66.4%

当我们有图像比率时,我们可以简单地计算div的高度,将比率乘以视口宽度:

height: calc(0.664 * 100vw);

对我来说,它工作,正确设置div高度,并在窗口调整大小时更改它。