html - HTML 5 で画像の一部を表示する

Question

サイズが 16x16 の 100 個のアイコンを含む画像があるとします。したがって、画像サイズは 1600x16 です。ここで、画像HTML 5を表示するタグが必要です。nth表示する画像の特定の部分を定義する HTML 構文は何ですか?

<img src="pic.jpg" height="16" width="16" offsetOrSomething=??/>

Answer 1

画像を背景として使用し、 を使用しbackground-positionて移動します。

<span class="icon nth"></span>

と

.icon{
  width:16px;
  height:16px;
  display:inline-block;
  background-image: url('pic.jpg');
}
.icon.nth{
  background-position:-32px -16px; /*both left and top should be multiples of the icon dimensions*/
}

---

あなたの例のようにそれをしなければならない場合は、ラッパーが再び必要にoverflow:hiddenなり、その中に画像を移動します..

<span class="icon-wrapper"><img src="pic.jpg" style="left:-16px;top:-32px;" /></span>

と

.icon-wrapper{
    width:16px;
    height:16px;
    display:inline-block;
    overflow:hidden;
    position:relative;
}
.icon-wrapper img{position:absolute;}

Answer 2

簡単な方法は、親の寸法を制限して画像をトリミングすることです...

<div style="height:10px; overflow-y:hidden;">

    <img src="pic.jpg" height="16" width="16" />

</div>

マージンの上部を負の値に設定して、隠れた部分を表示してみてください。