CSS - Background-size:封面太大

Question

当我尝试使用具有固定位置的background-size:cover属性时，我的图像变得太大，并且被裁剪。我希望它与原始图像的大小相同，但我不能解决这个问题。我试着保持图像的效果不变。

#wrapper {
  width:100%;
  height:580px;
   background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg');
background-position: center center;
background-attachment:fixed;
background-repeat: no-repeat;
background-size: 100% 100%; 
/*background-size:cover;*/
-webkit-transition: background-image 0.4s;
-moz-transition: background-image 0.4s;
-ms-transition: background-image 0.4s;
-o-transition: background-image 0.4s;
transition: background-image 0.4s;
overflow: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}

这是我的Demo

全屏Demo

Answer 1

试试这个，而不是封面：

#wrapper {
background-size:contain;
}

Answer 2

也许封面不是解决问题的办法..来自W3schools：“尽量放大背景图像，使背景区域完全被背景图像覆盖。背景图像的某些部分在背景定位中可能看不到。

Answer 3

正如其他人提到的，使用background-size: contain可能是一种选择。

但是，如果你可以裁剪图像的一小部分，那么你可能更喜欢尝试以下组合：

• background-size: cover;
• background-position: center;

当图像至少是以为中心的时，裁剪通常看起来不会那么糟糕。