0

我有代码在卡片标题中显示背景图像，如下所示：

<div class="card-heading"></div>

在 CSS 中：

.card-1 .card-heading {
  background: url("../images/bg-head-02.jpg") center center/cover no-repeat;
  padding-top: 210px;
}

在桌面它看起来很好是这样的：

在此处输入图像描述

但在移动设备中，它会被切断，如下所示：

在此处输入图像描述

如何修复我的代码以使其也适合移动设备。

4

1 回答 1

1

问题：您正在使用property的cover值background-size。这意味着图像将被调整大小以适应可用空间的高度或宽度，并且任何“额外”的图像都将被裁剪。在您的情况下，图像被制作得足够大以适合您的元素的高度，这使其太宽而无法适应，因此宽度被裁剪。

请注意，使用单独的background-size: cover;CSS 不会改变此行为- 它的行为方式与包含在background速记中时的行为方式相同。您可以在下面的工作示例中看到这一点。

选项 1：背景大小：包含如果您希望图像完全适合空间，您可以使用contain-但是请注意，这将在图像上方和/或下方添加空白空间，因为纵横比将不再与图像本身匹配.

解决方案 - 选项 2：使元素具有正确的图像纵横比。
您可以使用%填充而不是固定填充。
要计算正确的百分比，请使用：image_height / image_width例如在此处的示例中：210/1200=17.5%

比较以下示例中的所有这些选项：

.card-heading {
  background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
  padding-top: 210px;
  border: 1px solid red;
}

.card-heading-cover {
  background: url("https://via.placeholder.com/1200x210") center no-repeat;
  background-size: cover;
  padding-top: 210px;
  border: 1px solid red;
}

.card-heading-contain {
  background: url("https://via.placeholder.com/1200x210") center center/contain no-repeat;
  padding-top: 210px;
  border: 1px solid red;
}

.card-heading-responsive {
  background: url("https://via.placeholder.com/1200x210") center center/cover no-repeat;
  padding-top: 17.5%;
  border: 1px solid red;
}
<p><strong>Background: cover</strong> (like your example) - image is cropped</p>
<div class="card-heading"></div>

<p><strong>Background-size: cover</strong> - image is <i>still</i> getting cropped:</p>
<div class="card-heading-cover"></div>

<p><strong>Background-size: contain</strong> - note the extra space</p>
<div class="card-heading-contain"></div>

<p><strong>% padding</strong> - resizes to fit the image aspect ratio</p>
<div class="card-heading-responsive"></div>

于 2020-09-29T16:26:37.750 回答