根据视口大小设置背景图像以覆盖

Posted 2023-03-05

【中文标题】根据视口大小设置背景图像以覆盖

【英文标题】：Set background image to cover according to viewport size

【发布时间】：2014-05-26 11:56:58

【问题描述】：

关于提到的主题，我想知道如何添加代码来设置背景图像大小以完全覆盖窗口而不会切断侧面。 我曾尝试使用高度和宽度自动、覆盖和 100%，但没有一个工作。

感谢任何帮助。谢谢！

【问题讨论】：

您需要扭曲背景图像以获得 100% 的宽度和高度？

不，没有失真。只是图像！

【参考方案1】：

html width:100%; height:100%; 
      background:#fff url(image.jpg) center center no-repeat;
      background-attachment: fixed;
      background-size:100% auto;

【讨论】：

这还是剪掉了边缘！

【参考方案2】：

使用 CSS background-size 属性。

如果您希望背景图像将区域填充到最小宽度/高度，请使用：

background-size: cover;

如果您希望您的背景图片尽可能大地填充该区域，但仍显示您使用的所有图片：

background-size: contain;

【讨论】：

图像的底部仍然被切断:(

然后使用 contains 属性，这将确保尽可能多地显示图像而不会被切断

使用background-size: contain 而不是background-image: contain。答案已编辑。

【参考方案3】：

其实我找到了！我使用 div 将整个内容包装在 ID 为“wrapper”的正文中，然后使用以下 CSS 代码：

#wrapper

background-image: url('Media/bg.jpg');
position:absolute;
top:0;
bottom:0;
right:0;
left:0;

感谢大家的帮助！ :)