CSSで画像の非伸縮効果を実現する方法

PHPz
リリース: 2023-04-23 17:46:58
オリジナル
3836 人が閲覧しました

CSS では、背景画像のプロパティを設定して、画像を非伸縮にする効果を実現できます。通常、次の 2 つの方法を使用します:

方法 1:background-size

background-size 属性を使用して、背景画像のサイズを定義します。背景画像を使用することも、カバーまたは包含を使用して背景画像のサイズに適応させることもできます。カバーを使用すると、背景画像は要素の幅と高さ全体を満たすように引き伸ばされますが、変形しません。 contains を使用すると、背景画像は要素内で元のサイズを維持しながら、要素を最大限に埋めます。

たとえば、次のコードでは、背景画像を引き伸ばさずに固定サイズに設定できます。

div { background-image: url("example.jpg"); background-size: 300px 200px; }
ログイン後にコピー

方法 2:background-position

Background-position 属性を使用すると、次のことができます。背景画像の位置を設定します。値は特定のピクセル値または中央、上部などの相対位置です。背景画像を要素の中央に配置すると、要素のサイズがどんなに変化しても背景画像は伸びません。

たとえば、次のコードは背景画像を要素の中心に設定します。

div { background-image: url("example.jpg"); background-position: center center; background-repeat: no-repeat; }
ログイン後にコピー

上記の 2 つの方法を使用して、CSS で非伸張の背景画像を実現します。実際の状況に基づいて、自分に合った具体的な方法を選択できます。

以上がCSSで画像の非伸縮効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!