Question

我有一个背景图片，我想填充（响应）页面的宽度。即如果页面很大，图像的宽度也很大。然而，如果宽度缩小，则图像被裁剪而不是缩放（因为我希望高度保持不变，即任何地方都没有空白）。

除了填充宽度外，我的大部分都在工作。

这是我的jsfiddle：https://jsfiddle.net/jwdyc1rh/

HTML：

<body should-scroll>

CSS：

<body class=" cms-index-index cms-home">

<div class="main-container col1-layout">
        <div class="main">
</div> <div>
    </div>

如果不拉伸屏幕很难看，很难看，但如果它被拉伸，你可以看到白色背景，而不是图像缩放以适应。

这个工作的一个完美的例子是我想要的是www.prada.com但我似乎无法找到合适的代码。

Answer 1

使用background-size: cover;

jsfiddle

Answer 2

应用背景尺寸，例如background-size: 100% 100%;

它会起作用。

body.cms-home .main-container {
    margin-top: -20px; 
    background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
    background-repeat: no-repeat;
    min-height: 1024px;
    background-position: center;
    width: 100%; 
    background-size: 100% 100%;
}

Updated Fiddle

Answer 3

background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

全宽CSS - 响应

3 个答案: