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

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 サイトの他の関連記事を参照してください。