Question

我有这个jsfiddle：http://jsfiddle.net/SoSoDef/uhx3o62f/1/。它似乎工作正常，唯一的问题是因为某种原因，图像会在顶部和底部被切割一点。

-webkit-background-size: cover;

为什么？

感谢您的所有帮助

Answer 1

由于CSS样式与JSFiddle Result视口的尺寸相关，背景图像被切断。

CSS属性＆＃39; background-size：cover＆＃39;根据JSFiddle视口的宽度约束和缩放图像的整体比例大小。

在你的身体风格的背景属性中，＆＃39;中心固定＆＃39;将图像的中心点定位在视口中心的固定位置。如果缩放图像（受视口宽度约束）高于视口本身，则图像仅超出JSFiddle Result视口的上下边界，并显示为已剪切。

为了说明，请尝试移除中心固定的＆＃39;从你的背景属性的身体风格，像这样：

    body {
      background: url("http://f.cl.ly/items/260T100F3j2Y3L1S0g1w/bg.jpg") no-repeat #292929;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

图像现在将自己定位到视口的顶部，并且不再沿着上边缘剪切。然后，缩小“结果”视口，一旦图像尺寸缩小，图像将不再沿底部剪裁。

我怀疑您正在尝试将图像水平和垂直缩放到视口的可用尺寸。但是，在任何给定时间，您都有一个随机大小的视口，以及具有特定宽高比的图像。如果您不想垂直或水平地强制挤压图像以实现图像填充，则必须允许图像相对于视口的宽度进行缩放（并且可能沿着底部边缘剪切），如建议的那样在此SO Answer。

如果图片的内容无法裁剪且必须可见，而不是使用CSS来放置图片，请使用＆＃39; img＆＃39;使用CSS的元素和比例。如果图像内容超出视口的可用尺寸，则视口将可滚动。

我为您创建了后一种方法codepen example。

Answer 2

background-size属性允许您根据div的大小进行扩展和缩小。它的响应更多参考，请查看此LINK

Answer 3

来自[W3Schools]

封面：将背景图像缩放到尽可能大的位置背景区域完全被背景图像覆盖。背景图像的某些部分可能不在视图中背景定位区域

所以基本上它表现正常，当身体变宽时，背景图像的顶部和底部将被切断。

您可以使用contain代替并添加白色背景以始终保留整个图像。

-webkit-background-size: cover;
background-color:white;

背景图像在顶部和底部被切割

3 个答案: