有没有办法使用具有缩放和最大宽度的背景图像？答案

【问题标题】：Is there a way to use background image with scaling and max-width?有没有办法使用具有缩放和最大宽度的背景图像？
【发布时间】：2013-11-19 05:05:52
【问题描述】：

我正在尝试使用 CSS 和 HTML 创建一个简单的布局。

如果屏幕尺寸小于图像尺寸，body标签的背景图像是否可以缩放到宽度和高度的100％，如果屏幕更大，则应该显示图像没有缩放/拉伸（即 100%）？

如何使用 CSS 做到这一点？

我看过问题：Possible to set a max-width for a background image? (want to scale background-image down, but not scale up)

但这似乎不适用于 body 标签，并且当 Windows 尺寸小于图像时，我无法使其缩放。这是我正在使用的简化代码：

<HTML>
<HEAD>
</HEAD>

<BODY>
<div id="bgroud">
</div>

</BODY>
</HTML>

body, html{
    width:100%;
    height:100%;
    }

    #bgroud {
        background: url("index.jpg") no-repeat fixed left top transparent;
        height: 100%;
        width: 100%;
        background-size:cover; 
        max-width:1280px;
    }

【问题讨论】：

标签： css background-image

【解决方案1】：

希望对你有帮助，

 background-size:cover; // or 100%

【讨论】：

当我使用它时，当窗口较小时图像会缩放，但现在如果窗口大于图像，图像会缩放，但随后会被切断。我已将代码添加到问题中。
调整容器的宽度。"cover" 属性取容器的全宽，它会根据 bg-size 进行调整
抱歉，我无法理解您要告诉我的内容。你能用更多的代码来扩展你的答案，所以会说明它吗？
你能给我链接吗？

【解决方案2】：

以下 CSS 对我有用：

body, html{
width:100%;
height:100%;
}


#bgroud {
    height: 100%;
    width: 100%;
    background-image:url("index.jpg");
    background-repeat:no-repeat;
    background-position:left top;
    overflow:  auto;
    background-size:cover;
    max-width:1280px;
    max-height:902px;
}

【讨论】：

【解决方案3】：

请试试这个，希望它会工作:)

body {
    background-image:  url("/assets/pic.jpg");
    background-size:   cover;   
    background-repeat: no-repeat;
    max-width:100%;
}

【讨论】：