CSS拉伸或适应背景图像

Question

我想使用CSS拉伸或适应我的背景图像，以使其始终占据100％的宽度和高度，无论屏幕大小如何。这是一个经常被问到的问题，每个人都建议使用background-size：100％，然后它就能工作了。但是只使用background-size可以适应我的图像的宽度，而高度仍然被裁剪。
如果有人能帮我解决这个问题，我会非常感激。
非常感谢

- m0j1

Answer 1

编辑：

您尝试了background-size: 100%，
CSS会将其解释为宽度100％，高度自动，会显示如下：

background-size: 100% auto;

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

background-size: 100% 100%;

结束编辑

尝试：

background-size: cover;

这将适应宽度或高度，并溢出其余部分

或：

background-size: contain;

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

关于CSS3的background-size属性，您可以在此处阅读更多信息。

- Goos van den Bekerom

---

我已经尝试使用“覆盖”功能，但问题是它适合宽度而高度仍然被裁剪了。我不想保持纵横比，我希望无论屏幕大小如何，宽度和高度都能适合。谢谢。 - m0j1

我稍微编辑了一下我的回答，但如果“cover”不是你想要的，那么“background-size: 100% 100%;”应该可以满足你的需求。你对此有什么问题吗？ - Goos van den Bekerom

感谢设置background-size:100% 100%解决了问题，我之前只使用了background-size:100%。非常感谢您能够编辑答案并包含这一点。再次感谢。 - m0j1

我正在做那个哈哈;)很高兴它对你有帮助;) - Goos van den Bekerom

Answer 2

您可以尝试以下方法：

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

或者

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

- tim

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)

- Arber Braja