HTML と CSS を使用して画像の一部だけを表示するにはどうすればよいですか?

HTML/CSS で画像の一部を表示する

画像を表示するとき、画像の特定の部分だけを表示したい場合があります。それ。 HTML と CSS は、これを実現するためのいくつかの手法を提供しています。

CSS 'Clip' プロパティの使用

1 つの方法は、CSS で 'clip' プロパティを使用することです。ただし、このプロパティでは要素が絶対的に配置される必要があるため、特定のシナリオでは制限が生じる可能性があります。

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

「css:url()」の使用 参照

「css:url()」参照を使用している場合、CSS で画像を直接クリップすることはできません。このような場合は、画像を小さな部分にスライスし、必要な部分だけを表示する「画像スライス」テクニックの使用を検討できます。

<div class="container">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="HTML と CSS を使用して画像の一部だけを表示するにはどうすればよいですか?" ><p>このテクニックを使用すると、中央の 50x50 ピクセルのみを表示できます。前述の 250x250px 画像の一部。</p>
<p><strong>代替アプローチ</strong></p>
<p>絶対配置や「画像スライス」技術を使用できない場合は、次のような他の方法を検討できます。</p>
<ul>
<li>
<strong>画像のトリミング:</strong> 画像編集ソフトウェアを使用して外部で画像をトリミングし、トリミングされた部分のみを使用します</li>
<li>
<strong>JavaScript の使用:</strong> JavaScript を使用して、画像の表示サイズを動的に調整し、その場でトリミングします。</li>
<li>
<strong>画像ビューアの使用:</strong> 最新の「画像ビューア」ツールなど、トリミング機能を提供する画像ビューアを使用します。ブラウザ。</li>
</ul>
</div>

以上がHTML と CSS を使用して画像の一部だけを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。