0

如果以前有人问过这个问题，请原谅我，但我总是将随机的图像组合在一起，并想知道一种确定的方式来做我正在寻找的事情。这是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 之类的工具来编辑资产的大小。我想让它成为一种“背景”，其大小适合“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 像素。我已经尝试使用硬像素值，但它没有改变。想法？

4

2 回答 2

1

您可以使用 CSS3background-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 填充物

如果你需要支持 IE8，有一个 Polyfill。您可以在以下位置获取它以及有关如何使用它的信息：https ://github.com/louisremi/background-size-polyfill

于 2013-10-28T18:51:31.010 回答
1

我会将图像设置为 div 背景，并使用包含或覆盖作为背景大小。

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

于 2013-10-28T18:51:33.127 回答