如何在窗口大小调整时使div的背景图像缩小？

我的网页上有一个div，图片为背景。当我缩小浏览器窗口时，图像的右侧部分被切断。如何在窗口大小调整时使div的背景图像缩小？

下面的代码是在我的.css文件：

.captions { 
    max-width: 870px; 
    margin-top: 20px; 
    margin-bottom: 25px; 
    background-image: url('../images/0.png'); 
    height:20px; 
    background-repeat:no-repeat; 
}

这个代码是在我的HTML页面：

<div class="captions"></div>

可能有人请告诉我怎么弄背景的宽度图像在页面大小调整时会缩小，以便始终显示图像的整个长度？

我对css很合理，对于代码真的很感激。

谢谢大家提前。

来源

2014-03-27 RicSum

你有没有尝试过的宽度设置为一个计算表达式？即'width：calc（100％）' - 这样它总是包含窗口当前宽度的100％。 – DeeKayy90

使用背景大小的CSS3属性。它可以让你指定你想要的背景图片的大小。在这种情况下，我们将它设置为宽度和高度都为100％（尽管您可能只想将其更改为宽度）。并且将.captions容器设置为100％宽度，以便相应地进行调整。

工作实施例：

.captions { 
    max-width: 870px; 
    margin-top: 20px; 
    margin-bottom: 25px; 
    background-image: url('../images/0.png'); 
    height:20px; 
    background-repeat:no-repeat; 
    background-size:100% auto; 
    width:100%; 
}

来源

2014-03-28 00:03:37 Martin

使用填充百分比来设定高，因为padding-top和padding-bottom百分比被链接到容器的宽度。并且padding-top通过将图像高度除以宽度来计算。

.captions { 
    background-image: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png'); 
    background-size: 100%; 
    width: 100%; 
    padding-top: 29.8%; 
    height: 0; 
    text-indent: -9999px; 
}

See demo

来源

2014-03-28 01:54:30 newTag

如何在窗口大小调整时使div的背景图像缩小？

回答

相关问题