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

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

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

Is there any ratio for Responsive Full Background Image

css

background-image

responsive

aspect-ratio