Question

我的网页中有一个以图像为背景的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很合情合理，非常感谢有关代码的帮助。

提前谢谢大家。

Answer 1

使用background-size 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%;
}

Answer 2

使用填充百分比设置高度，因为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 的

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

2 个答案: