Question

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

如果屏幕尺寸小于图像尺寸，身体标签的背景图像可能会缩放到宽度和高度的100％，如果屏幕较大，则应显示图像没有缩放/拉伸（即100％）？

如何使用CSS执行此操作？

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

但这似乎不适用于身体标签，＆amp;当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;
    }

Answer 1

希望它会对你有所帮助，

 background-size:cover; // or 100%

Answer 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;
}

Answer 3

请试试这个，希望它能起作用：）

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

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

3 个答案: