CSS - 背景尺寸：封面太大答案

【问题标题】：CSS - Background-size: Cover is too bigCSS - 背景尺寸：封面太大
【发布时间】：2015-12-22 16:57:51
【问题描述】：

当我尝试使用具有固定位置的 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

【问题讨论】：

这就是你想要的吗？ jsfiddle.net/mxj5dfhs/31
也许封面不是答案..来自 W3schools：“将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在后台定位区域内”
我认为背景大小变得相对于窗口而不是它的元素。您会认为它只会将其覆盖到容器中，但事实并非如此。这导致它被“裁剪”。
@Harry 遗憾的是，在你的演示 Harry 中它仍然为我裁剪。在我的演示中尝试使其与下面的图像大小相同。这是 100% 宽度的原始图像大小。
stackoverflow.com/questions/21786272/…

标签： html css uiimageview presentation

【解决方案1】：

试试这个，而不是封面：

#wrapper {
background-size:contain;
}

【讨论】：

【解决方案2】：

也许封面不是答案.. 来自 W3schools：“将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在视图中内背景定位是

【讨论】：

【解决方案3】：

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

但是，如果对图像的一点点裁剪没问题，那么您可能更愿意尝试以下组合：

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

当图像至少居中时，裁剪通常看起来不会那么糟糕。

【讨论】：