Question

我知道有很多关于CSS背景图像的问题和答案，但不幸的是我找不到合适的答案;在此之上，一些答案已经很老了......

我的CSS：

#showcase {
  min-height: 500px;
  background: url('../img/P1220784--grijs-1920.jpg') no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #a21a21;
  background-color: rgba(255, 255, 255, .9);
  font-weight: 600;
}

对我来说几乎是完美的，除了在调整大小时，图像在两侧被切断。图像是人物的照片，所以我希望所有这些都显示出来！（我应该补充说我使用的图像是1920 * 798像素）可以这样做吗？

谢谢你，广告

Answer 1

试试这个

background-size: contain;

Answer 2

您可以使用background-size: auto 100%;

Answer 3

您好您可以尝试所有可能的属性属性＆＃34; background-size＆＃34;在浏览器中。

背景大小：100％ - 制作图像覆盖整个div但图像会拉伸。

背景大小：凹陷 - 使图像覆盖整个div，具有响应式截止功能。

背景大小：自动/包含 - 根据div上的高度宽度负责设置图像但不覆盖整体。

Answer 4

实际上，我选择关注@ Dejan.S＆＃39;建议。 img作为HTML标记，而不是用作背景。让我的生活更轻松！

什么CSS规则显示背景图像而不切断？

4 个答案: