Question

对于完整的背景响应图像，是否需要考虑任何宽高比？图片大小为1361 x 1216. Original Image

以下是使用的CSS，

body{
background-image:url('../images/bg-img.jpg');
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: contain;
  }

但结果是background-size: contain

如果使用background-size：cover，则会裁剪图像的顶部和底部。

Answer 1

这应该可以解决问题;）

body {
    background-image:url('../images/bg-img.jpg');
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: 100% auto;
}

background-size：WIDTH HEIGHT;

编辑：你可以这样做：

body{
background-image:url('https://i.stack.imgur.com/vLd20.jpg');
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
@media(min-width: 768px){
  body {
    background-size: 100% auto;
  }
}
@media(max-width: 767px){
  body {
    background-size: 100% 100%;
  }
}

Codepen：http://codepen.io/anon/pen/BpJWOR

请注意，“100％100％”会不成比例地拉伸背景。您可以在“max-width 767px section”

中使用“auto 100％”

你也可以试验110％或更高。继续尝试，直到它看起来很完美......欢迎回应网页设计：P

响应式完整背景图像是否有任何比率

1 个答案: