164

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

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

4

4 に答える 4

180

質問で述べたように、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 demo 。

元の回答を補足するために、やや遅れて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— これはローカル URL (CSS id-selector を使用) または外部ファイルの URL (ファイルパスを使用) のいずれかで SVG を識別できますが、(まだ) どちらも試していないので、それらの利点や警告についての洞察を提供することはできません。

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 demo 。

参考文献:

于 2011-01-09T15:00:58.073 に答える
125

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

于 2008-09-11T21:37:29.007 に答える
43

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

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

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

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

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

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

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

于 2014-04-22T13:21:50.340 に答える
2

background-position を調整して、背景イメージを の異なる位置に移動しますdiv。

div { 
  background-image: url('image url');
  background-position: 0 -250px; 
}
于 2020-09-15T09:19:58.213 に答える