Question

我一直在做一些HTML和CSS，并遇到了一个我希望有人可以提供帮助的问题。

我正在尝试制作全宽幅图片，覆盖整个Div而不会对图片造成严重的质量损失。

我想要实现的一个例子类似于以下网站：

这两个网站都使用了一张图片，其质量接缝通过扩展或缩小而不会解散。

这是怎么做到的？

任何人都知道任何教程或有他们可以告诉我的示例代码。我创建了一个可以根据浏览器窗口大小而变化的图片，但是当浏览器改变大小时，它的质量很糟糕。

先谢谢大家！

Answer 1

很简单。有几种方法可以做到这一点，但最简单的方法是将图像设置为div的背景，背景大小属性设置为覆盖：background-size: cover;

例如（CSS）：

div {
  background: url('path/to/your/image.jpg') no-repeat center;
  background-size: cover;
}

修改：解决图像质量问题：您需要确保您的背景图片等于或大于div的尺寸。如果它更小 - 它会被拉伸以适应（这会降低质量）。