トリミングせずに背景画像を Div に合わせるにはどうすればよいですか?

背景画像を Div に合わせる

背景画像をトリミングせずに div 内に表示するには、background-size プロパティを利用します。意図した結果に応じて、div 内に収まるように画像を拡大縮小するか、div 全体をカバーするように選択できます。

Div に合わせて背景画像を拡大縮小する

div 内で完全に表示されたままになるように背景画像を拡大縮小したい場合は、background-size プロパティを次のように設定します。

background-size: contain;

Div をカバーするように背景画像をスケーリングする

あるいは、背景画像で div 全体をカバーしたい場合は、background-size を使用します。に設定されたプロパティ

background-size: cover;

例

以下は、これらの設定の効果を示すいくつかの例です:

<div><ul>
<li>背景あり-size: contains;、画像はアスペクトを維持しながら div 内に収まるように縮小されます。 </li>
<li>background-size: cover; を使用すると、画像は div 全体をカバーするように引き伸ばされ、アスペクト比が歪む可能性があります。</li>
</ul></div>

以上がトリミングせずに背景画像を Div に合わせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。