css背景图像调整宽度裁剪高度

Question

我正在使用来自CSS提示和技巧的代码来覆盖背景图像.问题是它重新调整图像以适应宽度和高度并改变纵横比.我希望背景图像重新缩放到全屏宽度,然后仅裁剪高度(从图像顶部开始,而不是中心)以覆盖视图端口.以这种方式,将保持图像宽高比.

我遇到的第二个问题是它似乎不起作用,除非我使用图像的FQDN而不是下面的url.

html {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

代替

background-size: cover;

你会想要使用

background-size: 100% auto;

封面会将图像拉伸到最小尺寸,这样它的宽度和高度都可以适合内容区域,因此是您的问题.在这里了解更多相关信息.