Question

请原谅我，如果之前已经问过这个问题，但我总是把随机黑客放在一起拍照，想知道一种明确的方式去做我正在寻找的东西。这是HTML：

<div class="track-artwork">
      <img src="<?php echo $chart_track->image; ?>" class="background-image">
      <audio>
          <source src="" type="audio/mp4" />
          <source src="" type="audio/aac" />
      </audio>
  </div>
</div>

我链接的图像是111px X 111px。它需要更小，以适应轨道艺术品div并完全显示。我没有能力用photoshop等编辑资产的大小。我想这样做，所以图像充当各种各样的“背景”，大小适合“轨道艺术品”div，任何尺寸都有5px的边距。这是我为实现这一目标而玩弄的CSS：

.track-artwork {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin: 0;
    position: relative;
    vertical-align: top;
    width: 20%;
}

.background-image {
  position: absolute;
  z-index: 0;
  width: 100%;
  top: 0;
  left: 0;
}

不幸的是，这没有成功。宽度似乎适当，但高度不起作用 - 无论我输入什么，似乎保持111px。我已尝试使用硬像素值，但它没有改变。思考？

Answer 1

您可以使用CSS3 background-size属性执行此操作。

<强> PHP

<div class="track-artwork" style="background-image:url(<?php echo $chart_track->image; ?>);">
    <audio>
        <source src="" type="audio/mp4" />
        <source src="" type="audio/aac" />
    </audio>
</div>

<强> CSS

.track-artwork {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

IE8 Polyfill

如果您需要支持IE8，则会有Polyfill。您可以在https://github.com/louisremi/background-size-polyfill

获取有关如何使用它的信息

Answer 2

我会将图像设置为div背景，并使用contains或cover作为背景大小。

.track-artwork {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin: 0;
    position: relative;
    vertical-align: top;
    width: 20%;
    background-size: cover; // or background-size: contain;
}

封面将使用背景图像填充整个div，如果比率不同，则会切掉部分图像。

包含将调整图像的大小，使其在div中完全可见。您必须使用php将背景图像网址设置为正确的图像位置。

在CSS中调整图像大小

2 个答案: