HTML / CSSで画像の一部のみを表示するにはどうすればよいですか？

140

HTMLで250x250pxの画像の中央の50x50pxだけを表示する方法が必要だとしましょう。どうやってやるの。また、css：url（）参照に対してこれを行う方法はありますか？

CSS でクリップを認識していますが、絶対配置で使用した場合にのみ機能するようです。

html css image

— ハフソール
ソース

List Apartは、HTML / CSS / JSの問題でアクセスするサイトの誰のリストにも含まれている必要があります。スプライトを実行する1つの方法と、JSを使用する別の方法があります。

— graham.reeds 2008

スプライトを使用-ここを参照w3schools.com/css/css_image_sprites.asp

回答:

116

これを行う1つの方法は、コンテナーで背景として表示する画像（td、div、spanなど）を設定し、背景の位置を調整して必要なスプライトを取得することです。

— エスポ
ソース

明確にするために、コンテナーの幅と高さを設定するには、td、div、spanなどを50pxに設定します。

— ポールD.ウェイト

@Espo、これはかなり標準的なアプローチのようですが、32x32のサイズの個別の画像がいくつか含まれているスプライト画像があり、そのうちの1つを32x32より大きいdivやspanなどに表示したい場合はどうでしょうか。 .background-positionの設定は機能しなくなりました。

— マシューレイトン2013年

@ series0neおそらく組み合わせることができますbackground-size

— Stijn de Witt

163

質問で述べたように、clipcssプロパティがありますが、クリップされる要素はposition: absolute;（残念）である必要があります。

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

スニペットを展開

JS Fiddleデモ、実験用。

元の答えを補足するために-やや遅れて- clip-path現在非推奨のclipプロパティを置き換えたの使用を示すために編集しています。

このclip-pathプロパティでは、次の範囲のオプションを使用できます（元のオプションよりも詳細clip）。

inset—「distance-from」として4つの値で定義された長方形/直方体の形状(top right bottom left)。
circle— circle(diameter at x-coordinate y-coordinate)。
ellipse— ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate)。
polygon— 要素の左上隅の原点を基準にした一連のx/ y座標によって定義されます。パスは自動的に閉じられるため、ポリゴンの実際の最小ポイント数は3である必要があります。それより少ない（2）はラインである、または（1）はポイントです：polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])。
url —これは、SVGを識別するためのローカルURL（CSS id-selectorを使用）または外部ファイルのURL（file-pathを使用）のいずれかですが、（まだ）まだ実験していないため、彼らの利益や警告についての洞察を提供することはできません。

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

スニペットを展開

JS Fiddleデモ、実験用。

参照：

~~clip~~—注：非推奨。
clip-path（MDN）。
clip-path（W3C）。

— デビッドはモニカを復活させると言います
ソース

素晴らしい発見、たくさん感謝します:)参考までに、それは人が考えるほど制限されていません。imgタグの周囲にイメージコンテナーdiv（id = "img_container"）があり、img_containerの位置を相対的にし、imgを絶対的にする場合、イメージをそのようにクリップできます

— FurtiveFelon

「位置：絶対的;（これは残念です）」

— Sanket Sahu

私が気づいているわけではありません。

— デビッドはモニカ

clipされる非推奨。新しいclip-pathものはポジショニングを必要としません

— 熱心

クリップは非推奨ですが、多くの最近のブラウザーはまだクリップパスをサポートしていません。developer.mozilla.org/en-US/docs/Web/CSS/clip-path

— barrypicker

別の代替方法は次のとおりですが、この場合のように、画像がコンテナー内の唯一の要素であると想定しているため、最もクリーンではありません。

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

次に、コンテナーを目的のサイズのマスクとして使用し、画像を負のマージンで囲んで正しい位置に移動できます。

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

このJSFiddleでデモを見ることができます。

IE> 9、そしておそらく他のすべてのブラウザのすべての重要なバージョンでのみ機能するようです。

— ヴィンセント
ソース

それはちょっとハックですが、これはすべてのブラウザで機能する（クリップは非推奨であり、クリップパスはIEでは機能しない）プラスWebページを印刷しようとすると機能する（背景画像はデフォルトでスキップされる）プラス面があります。）

— Rauni Lillemets、2015

これは、ブラウザー全体で唯一の方法です。他のすべての方法には問題があります。「クリップ」は廃止され、背景の位置がすべてのブラウザーで正確に読み取られるわけではありません。

— カリーム