如何避免使用CSS水平拉伸背景图像？

Question

我正在创建一个以图像为背景的登录表单。 这是截图：

在普通屏幕上看起来不错。但是当我尝试在27“iMac显示器上打开它时，表格看起来很糟糕。

以下是iMac显示器的屏幕截图：

到目前为止，这是我的CSS：

body.woocommerce-account #main-content {
  background-image: url('path/to/login-background-min.png');
    background-repeat: no-repeat;
    background-size:  100% 100%;
    padding-top: 20px;
    min-height: 800px;
}

如何避免图像拉伸？或者是否有任何方式使其尊重决议？

感谢。

Answer 1

如果您移除background-size: 100% 100%;，它将不再延伸。

为了确保覆盖整个表面区域，您应该使用它。

background-size: cover;

这可能会导致一张图片无法显示。 如果您想要整张图片并且不介意图片左侧和右侧的一些空白区域，您应该使用它：

background-size: contain;

如果你想要，你可以使用它，这样它将始终保持居中。

background-position: center;