javascript - CSS 背景大小 : cover and background positioning for a 1000x100 graphic

Question

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

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

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

Answer 1

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