CSS を使用して画像を自動的にトリミングして中央に配置するにはどうすればよいですか?

画像のトリミングと中央揃えの自動化

画像が特定の領域内で完全に中央に表示され、切り取られて表示されるようにすることは、特に画像が正しく表示されていない場合に困難になることがあります。サイズは不明です。この質問では、CSS を使用して画像を自動的にトリミングして中央揃えにする手法について説明します。

背景画像と中央揃え

この解決策には、サイズが一致する要素内の背景画像を利用することが含まれます。必要なトリミングされた寸法。背景位置を center center に設定すると、画像は要素内の中央に配置されます。

基本的な例

このコード スニペットでは、.center-cropped クラスが幅と高さが 100 ピクセルの要素を定義します。 Background-image プロパティは画像 URL を割り当て、background-position 属性は要素内の画像を中央に配置します。

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

<div class="center-cropped">

このメソッドにより、事前定義された正方形内で画像を自動的にトリミングして中央に配置することができます。領域を確保し、さまざまな画像サイズにわたって一貫した視覚的プレゼンテーションを保証します。

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