ホームページ > 記事 > ウェブフロントエンド > CSS 画像プロパティのガイド:background-size と object-fit
CSS 画像プロパティのガイド:background-size と object-fit
- PHPzオリジナル
- 2023-10-21 09:09:301700ブラウズ
CSS 画像プロパティ ガイド:background-size と object-fit
フロントエンド開発では、画像を使用することが非常に一般的です。 Web ページ上で画像をより適切に表示するために、CSS は画像のサイズとレイアウトを調整および制御するためのさまざまなプロパティを提供します。このうち、background-size と object-fit はよく使用される 2 つのプロパティで、必要に応じて画像のサイズと適応を調整できます。この記事では、これら 2 つのプロパティについて詳しく説明し、具体的なコード例を示します。
1.background-size 属性
background-size 属性は、背景画像のサイズを調整するために使用されます。次の値を使用できます:
- cover: 背景画像を比例的に拡大縮小し、コンテナを完全に覆います。画像の一部が切り取られる場合があります。
.background {
background-image: url('img.jpg');
background-size: cover;
}- contain: 背景画像を比例的に拡大縮小し、コンテナ内で可能な限り完全に表示します。
.background {
background-image: url('img.jpg');
background-size: contain;
}- length: 背景画像の幅と高さを指定します。
.background {
background-image: url('img.jpg');
background-size: 200px 300px;
}- percentage: 背景画像の幅と高さをコンテナに対する相対的なパーセンテージで指定します。
.background {
background-image: url('img.jpg');
background-size: 50% 75%;
}2. Object-fit 属性
object-fit この属性は、a1f02c36ba31691bcfe87b2722de723b 内の画像のサイズと適応を調整するために使用されます。鬼ごっこ。次の値を使用できます:
- fill: 画像を引き伸ばして
要素を埋めると、画像の歪みが発生する可能性があります。
img {
object-fit: fill;
}- contain: 画像を比例的に拡大縮小し、a1f02c36ba31691bcfe87b2722de723b 要素内でできるだけ完全に表示します。
img {
object-fit: contain;
}- cover: 画像を比例的に拡大縮小し、
要素を完全に覆います。画像の一部が切り取られる場合があります。
img {
object-fit: cover;
}- none: 画像のサイズと適応を変更しないでください (デフォルト値)。
img {
object-fit: none;
}- scale-down: 画像の元のサイズとコンテナのサイズに基づいて、画像のサイズと適応を決定します。
img {
object-fit: scale-down;
}3. サンプル コード
background-size プロパティと object-fit プロパティをよりよく理解して適用するには、以下は具体的なコード例です:
<!DOCTYPE html>
<html>
<head>
<style>
.background {
width: 500px;
height: 300px;
background-image: url('image.jpg');
background-size: cover;
}
img {
width: 200px;
height: 150px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="background"></div>
<img src="image.jpg" alt="图片">
</body>
</html> 上記のコードでは、.background クラスは background-size: cover; 属性を使用して背景画像を比例的に拡大縮小し、容器を完全に覆います。 a1f02c36ba31691bcfe87b2722de723b タグは、object-fit: cover; 属性を適用して、画像を比例的に拡大縮小し、a1f02c36ba31691bcfe87b2722de723b 要素を完全にカバーします。
関連プロパティの値を調整することで、Web ページのレイアウトに完全にフィットするように画像のサイズと適応をカスタマイズできます。
概要:
background-size プロパティと object-fit プロパティを使用すると、オブジェクトのサイズとフィット感を簡単に調整および制御できます。画像 方法。背景画像としても、a1f02c36ba31691bcfe87b2722de723b 要素内の画像としても、カスタマイズされた画像表示効果を簡単に実現できます。この記事が、これら 2 つのプロパティをより深く理解し、適用するのに役立つことを願っています。
以上がCSS 画像プロパティのガイド:background-size と object-fitの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。