php - 在 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。它需要更小以适应 track-artwork div 并完全显示。我无法使用 photoshop 之类的工具来编辑 Assets 的大小。我想使图像充当各种“背景”，大小适合“track-artwork”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;
}

不幸的是，这是行不通的。宽度似乎大小合适，但高度不起作用——无论我输入什么，它似乎都保持 111 像素。我用硬像素值试过了，但它没有改变。想法？

Answer 1

我会将图像设置为 div 背景，并使用 contain 或 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;
}

Cover 将用背景图像填充整个 div，如果比例不相同，则剪切掉部分图像。

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