如何在CSS3中按高度缩放背景？

Question

我知道我可以使用封面或包含'background-size'属性的值，但是这可以按窗口高度缩放背景吗？

我试过

background-size: auto contain

background-size: cover contain

两者都不起作用。

Answer 1

contain和cover关键字本身就是使用的;您不能仅将它们用于背景图像的宽度或高度，即您不能将它们中的两个放在一起。此外，这两个值将始终根据其宽高比缩放图像。

如果您想保留图像的宽高比，同时保持整个图像在其框中可见（包含），只需单独指定contain：

background-size: contain;

如果您只想保留背景图像的原始宽度，并将其高度与其包含的框一起拉伸，而不保留图像的纵横比，则必须指定其宽度（以像素为单位）和100％（其高度）。

因此，对于200像素宽的背景图像，您将使用：

background-size: 200px 100%;

不要忘记为您的图片提供合适的background-position和background-repeat。