html - CSS:如何制作排除图像纵横比的响应式背景图像？

Question

我想在 body 中制作一个不会保持 ratio 纵横比的背景图片。

html,
body {
  height: 100%;
  background-image: url(../images/xmasbg13.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

如果浏览器窗口处于全屏状态，上面的代码可以正常工作。但是当我调整浏览器大小时，它会保持图像的纵横比，不会覆盖整个页面。

Answer 1

background-size:cover怎么样

http://jsfiddle.net/2ez1e3mn/

您可以调整结果 Pane 的大小，图像也会随之调整大小(全高和全宽)。