添加到div

style="overflow:hidden;"

我有这个问题，并找到了Hasanavi的答案，但我在宽屏上显示背景图像时遇到了一个小bug -背景图像没有扩散到屏幕的整个宽度。

所以这是我的解决方案-基于Hasanavi的代码，但更好…这应该适用于超宽屏幕和手机屏幕。

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

你可能已经注意到了，background-size: contains;属性不适合超宽屏幕，背景尺寸:覆盖;属性不适合移动屏幕，所以我使用这个@media属性来处理屏幕大小并修复这个问题。

如果它是一个单一的预定背景图像，你想要div在不扭曲背景图像的纵横比的情况下进行响应，你可以首先计算图像的纵横比，然后创建一个div，通过以下步骤保持它的纵横比:

假设你想要一个4/1的纵横比，div的宽度是32%:

div {
  width: 32%; 
  padding-bottom: 8%; 
}

这是因为填充是根据包含元素的宽度计算的。

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

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

另一种可能效率较低的解决方案是将图像包含在设置为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>

添加到div

style="overflow:hidden;"