CSS を使用して画像を自動的に中央揃えにして特定の正方形サイズにトリミングするにはどうすればよいですか?

画像の中央揃えとトリミングを自動的に行う

多くの場合、特定の正方形の寸法に合わせて画像をトリミングしたり中央揃えにしたりする必要があります。画像のサイズに関する事前知識。これは、CSS の背景画像プロパティを利用することで実現できます。

動的トリミングによる画像の中央揃え

画像を動的に中央揃えしてトリミングするには、次の手順に従います。

1. 希望の切り抜きを表す、特定の幅と高さの HTML 要素を定義します。
2. background-image プロパティを使用して画像 URL を設定します。
3. background-position: center center; を使用して画像を中央に配置します。
4. 画像を防止します繰り返しを設定するには、background-repeat: no-repeat;.

例を設定します。コード:

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped">

この手法を使用すると、元のサイズに関係なく、画像が自動的に中央に配置され、定義された寸法内でトリミングされます。

以上がCSS を使用して画像を自動的に中央揃えにして特定の正方形サイズにトリミングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。