ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML と CSS を使用して画像の特定の部分を表示するにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-11 16:59:14574ブラウズ

How Can I Display a Specific Portion of an Image Using HTML and CSS?

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

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

HTML ソリューション

The 要素は、特定の基準に基づいてさまざまな画像部分を表示するための強力なソリューションを提供します。複数の HTML と CSS を使用して画像の特定の部分を表示するにはどうすればよいですか? をネストすることで、 内の要素コンテナーでは、さまざまなビューポート サイズ、デバイスのピクセル比、またはその他の条件に応じて、さまざまな画像 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。