css - 为什么我的主图放大了？视差滚动

Question

效果很好，但图像被放大了。关于原因的任何线索？

    #hero{
    background-image:url(../images/metalWorx_hero.jpg);
    width:1020px;
    min-height:398px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
     }

Answer 1

嗯，background-sizing: cover; 是您的背景图像看起来“缩放”的原因，因为它使背景图像变得如此之大以至于完全适合其容器。在您的案例中发生的情况(感觉它被放大了)是背景的纵横比与容器的纵横比不同。 background-sizing: cover 不会拉伸(stretch)背景图像，而是放大背景，直到它覆盖所有内容，不留间隙，但可能会发生“缩放”。

这是原因的说明，因为我知道我的英语有多糟糕:D

所以你可以看到，背景图像将调整大小以适应高度，但由于宽高比，两边都会超出容器。

编辑 #2 - 添加了更多信息和帮助

根据实际的宽高比和大小，有不同的解决方案。 “快速而肮脏的解决方案”是使用 background-size 但不是将其设置为“覆盖”，而是将其宽度和高度设置为 100%。代码:

#hero{
  background-image:url(../images/metalWorx_hero.jpg);
  width:1020px;
  min-height:398px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%; /* Set width and height to 100% */
}

这是一个非常简单的“修复”，但很明显当纵横比变形时会发生什么:

真正且唯一的修复方法 ;)

如果你真的想修复它，你应该确保你的容器和背景图像具有大致相同的宽高比，然后回到 background-size: cover; (就像你的第一篇文章一样)