为什么我的英雄形象放大了？视差滚动

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

嗯，背景调整：封面; 是您的背景图像看起来“缩放”的原因，因为它使背景图像变得如此之大以至于它完全适合其容器。你的情况会发生什么（感觉它被放大）是背景的纵横比与容器的纵横比不一样。背景尺寸：封面将超大背景，而不是拉伸背景图像，直到它覆盖所有内容，不留任何间隙，但可能会发生“缩放”。

以下是原因的说明，因为我知道我的英语有多糟糕：D

所以你可以看到，背景图片将调整大小以适合高度，但由于纵横比，两个边都将从容器中移出。

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

根据真实的宽高比和尺寸，有不同的解决方案。 “快速而肮脏的解决方案”是使用背景大小，但不是将其设置为“覆盖”，我们将其宽度和高度设置为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% */
}

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

真实且唯一的解决方法;）

如果你真的想要解决它，你应该确保你的容器和背景图像有相同的宽高比，然后回到背景大小：cover; （就像在你的第一篇文章中一样）