Question

我想使用css拉伸或调整我的背景图像，因此无论屏幕尺寸如何，它总是处于100％的宽度和高度。这被问了很多次，每个人都建议使用背景大小：100％，它会工作。但是使用背景尺寸只适合我图像的宽度，高度仍然会被裁剪如果有人可以帮我这件事，我会很感激非常多。

Answer 1

修改

您尝试了background-size: 100%，
CSS将其解释为100% width, automatic height，如下所示：

background-size: 100% auto;

你想要的是第二个参数（高度）也是100％，所以你应该这样做：

background-size: 100% 100%;

结束编辑

尝试：

background-size: cover;

这将适合宽度或高度，并溢出其余

或者：

background-size: contain;

这将使图像尽可能大而不改变其宽高比。

您可以阅读有关css3 background-size属性HERE
的更多信息

Answer 2

您可以尝试：

background: url('Your image URL') 100%;

或

background: url('Your image URL') 100% no-repeat;

Answer 3

试试这个CSS规则：

background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center
background-size: cover; // this makes img full-screen (full-width & full-height)

CSS拉伸或适合背景图像

3 个答案: