在CSS中调整图像大小

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将background-image网址设置为正确的图像位置。