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 です。トラック アートワーク 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 のままのようです。ハードピクセル値で試してみましたが、変わりません。考え？

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 背景に設定し、contain または cover を background-size として使用します。

.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 全体を背景画像で埋め、比率が同じでない場合は画像の一部を切り取ります。

Contain は、div 内で完全に表示されるように画像のサイズを変更します。PHP を使用して、背景画像の URL を正しい画像の場所に設定する必要があります。

于 2013-10-28T18:51:33.127 に答える