Css 响应性全背景图像是否有任何比例

对于全背景响应图像，是否需要考虑纵横比？图像大小为1361 x 1216

下面是使用的CSS

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

但结果是

如果使用背景尺寸：cover，则会裁剪图像的顶部和底部。

这应该可以做到；）

背景尺寸：宽高

---

编辑：您可以执行以下操作：

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%;
  }
}

代码笔：

请注意，“100%100%”会不成比例地拉伸背景。您可以在“最大宽度767px部分”使用“自动100%”

---

你也可以用110%或更高的比例进行实验。只要继续尝试，直到它得到完美的外观。。。欢迎使用响应式网页设计：P

请检查此项：未获得解决方案，我已将结果如何显示的图像放入其中，是否需要添加任何其他详细信息？请提供您的html代码。。例如，使用codepen.ioIt仍会裁剪图像的顶部和底部请提供您的html代码。那我再看一看。。例如，对于codepen.io，如果不想裁剪图像的底部和顶部，则应将高度设置为100%，将宽度设置为自动，如“背景大小：自动100%”；如果这没有帮助，我需要查看代码。背景大小：自动100%也不起作用。。。我已经给出了CodePent的链接，它提供了所需的输出。谢谢

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%;
  }
}