Question

我有一个布局问题，我似乎无法弄清楚。它涉及div中的背景图像，该视图的宽度为视口的100％。背景图像的宽度为1000像素，但我希望它总是拉伸以填充上面提到的div的宽度，无论视口是200px宽还是600px宽或1000px宽或1600px宽。另一个要求是图形应保持其纵横比，除非它小于50px高，此时图形应保持在50px的最小高度并保持在div内水平居中。这意味着视口越窄，您对图形本身的看法越来越少 - 直到您只能看到它的中心。

我正在使用background-size：cover，当视口为＆gt; = 500px时（即背景图形的最小高度为50px），它可以很好地工作。但是，我不知道如何将图形作为背景图像居中，宽度低于500px。

是否有可以处理此问题的CSS规则？或者我是否需要使用媒体查询和/或javascript来实现这一目标？

Answer 1

而不是background-size: cover;尝试background-size: 100% auto;将其基于其容器的宽度而不是高度。它仍然遵循它的纵横比例，但不再担心高度。

Answer 2

你好你的问题不是很清楚。但你可以使用它来拉伸和覆盖背景。你可以在它上面设置一个固定的居中背景，然后使用背景大小调整它的大小。

html { 
  background: url (images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

CSS background-size：1000x100图形的封面和背景定位

2 个答案: