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

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

画像の特定の部分を表示する機能は、Web における一般的な要件です。発達。サムネイルを作成するためでも、特定のセクションを強調表示するためでも、いくつかのテクニックが利用できます。

HTML ソリューション

The 要素は、特定の基準に基づいてさまざまな画像部分を表示するための強力なソリューションを提供します。複数の をネストすることで、 内の要素コンテナーでは、さまざまなビューポート サイズ、デバイスのピクセル比、またはその他の条件に応じて、さまざまな画像 URL やスタイルを指定できます。このアプローチにより、表示される画像部分を制御するための柔軟性が向上します。

<picture>
  <source media="(min-width: 1000px)" srcset="image-full.jpg">
  <source media="(min-width: 500px)" srcset="image-medium.jpg 50w, image-full.jpg 100w">
  <img src="image-small.jpg" alt="default image">
</picture>

clip() を使用した CSS ソリューション

質問で述べたように、clip() プロパティを使用すると、要素内に表示する長方形の領域を定義できます。ただし、要素が絶対的に配置されている必要があります:

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

css:url() References

残念ながら、clip() プロパティを直接使用することはできません。 css:url() 参照。ただし、必要な部分を切り取った新しい画像要素を作成し、その画像を元の要素の背景画像として使用することができます:

#element {
  background-image: url(clip.png);
  background-position: 50% 0%;
}

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