CSS 背景画像をコンテナに合わせて伸縮または拡大縮小するにはどうすればよいですか?

CSS 背景をコンテナに合わせて伸縮または拡大縮小する方法

CSS で背景画像を設定するときに、コンテナに合わせて背景画像を設定したい場合があります。コンテナの寸法内に完全に収まるか、エリア全体をカバーするように伸ばします。 CSS は、この効果を達成するための簡単な解決策を提供します。

解決策: 背景サイズ プロパティを使用する

CSS3 では、背景サイズ プロパティを導入しました。これにより、背景サイズ プロパティを指定できるようになります。背景画像のサイズとスケーリング。背景をコンテナ全体に合わせて伸縮または拡大縮小するには、次の構文を使用します。

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or other units */
}

100% の値は背景がコンテナの幅全体に伸びることを示し、auto の値は高さを許可します。元のアスペクト比を維持するように自動的に調整します。 image.

互換性

このソリューションは、2012 年以降、Chrome、Firefox、Safari、Edge などの最新のブラウザーでサポートされています。古いブラウザの場合は、互換性を確保するために、-webkit や -moz などのベンダー プレフィックスの使用を検討してください。

以上がCSS 背景画像をコンテナに合わせて伸縮または拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。