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

时间:2016-06-11 08:36:53

标签: html css twitter-bootstrap

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

enter image description here

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

以下是iMac显示器的屏幕截图: enter image description here

到目前为止,这是我的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;
}

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

感谢。

1 个答案:

答案 0 :(得分:3)

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

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

background-size: cover;

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

background-size: contain;

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

background-position: center;