Question

嘿，我觉得我做错了，因为每个人都说你可以用以下方式拉伸图像：

background-size: cover;

但是当我使用它时，一两面都会被裁剪掉。我实际上想要一种方法来扭曲图像，使其伸展以适应任何屏幕。那可能吗？这是我尝试过的确切代码（我尝试过很多变化）：

.carnival {
    background: url(../images/carnival.jpg) no-repeat 50% 50%;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
}

HTML：

    <div class="carnival"></div>

出于某种原因，如果我删除以下任何内容，背景根本不会显示：

height: 100%;
left: 0;
right: 0;

非常感谢任何帮助。无法相信设置背景图片对我来说有多复杂。

Answer 1

尝试使用background-size: 100% 100%;代替cover。

cover将导致背景图像缩放，以便填充块尺寸，裁剪任何多余的宽度或高度取决于纵横比之间的不匹配背景图像和应用图像的块。

body {
    margin:0;
}
.carnival {
    background: url(http://placekitten.com/700/1400) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
}

<div class="carnival"></div>

背景尺寸：封面;实际上并没有拉伸图像？

1 个答案: