html - CSS3背景随机切割我的图像

Question

我有两个 html 页面(index.html 和 about.html)在 body 标签中具有相同的背景。我正在使用以下 CSS 来创建背景:

body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

但是，浏览器(Firefox 和 Chrome)没有正确定位图像。由于背景颜色为白色，index.html 在背景图像下方有一条白线。我假设图像高度太短。

然而，about.html 的背景图片下有一 block 空白，超过了页面的四分之一。

当我使用相同的 CSS 时，这是怎么发生的。

关于这个主题，管理不同屏幕分辨率的背景图像的最佳方法是什么？

Answer 1

尝试:

background-size:contain;

contain 属性将图像缩放到最大尺寸，使其宽度和高度都能适应内容区域。