html - 如何避免使用 CSS 水平拉伸(stretch)背景图像？

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%; 它将不再拉伸(stretch)。

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

background-size: cover;

这可能会导致某张图片无法显示。如果你想要整张图片并且不介意图片左右两侧有一些空白，你应该使用这个:

background-size: contain;

如果您愿意，可以使用它，使其始终居中。

background-position: center;