最近引入的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 >

在Umbraco CMS中有这个问题，在这种情况下，你可以使用div的'style'属性将图像添加到div:

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

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

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

假设你有这样的东西:

<div class="content">
    ... // inner HTML
</div>

你想给它添加一个背景，但你不知道图像的尺寸。

我也遇到过类似的问题，我用网格解决了它:

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z索引是用来放置背景图像的，你当然可以放置img。div.content上面的背景。

注意:这可能会导致div.content具有与图片相同的高度，所以如果div.content有任何根据其高度放置的子元素，你可能想要设置一个数字，而不是像'auto'这样的东西。

我能想到的最好的解决办法是用百分比来指定你的宽度和高度。这将允许您根据显示器大小调整屏幕大小。它更响应式的布局。

举个例子。 你有

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

这是最好的选择，如果你想要一个响应式布局，我不建议浮动，在某些情况下浮动是可以使用的。但在大多数情况下，我们避免使用float，因为当你进行跨浏览器测试时，它会影响很多事情。

希望这对你有所帮助。