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

Question

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

我使用的是 background-size: cover，当视口 >= 500px（即背景图形的最小高度为 50px）时效果很好。但是，我不知道如何将宽度低于 500 像素的图形作为背景图像居中。

是否有可以处理此问题的 CSS 规则？还是我需要使用媒体查询 and/or javascript 才能做到这一点？

Answer 1

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

Answer 2

您好，您的问题不是很清楚。但是您可以使用它来拉伸背景，并且 covered.You 可以在其上设置固定且居中的背景，然后使用 background-size 调整其大小。

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 图形的封面和背景定位

CSS background-size: cover and background positioning for a 1000x100 graphic

html

javascript

css

background-image