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

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

さまざまなサイズの画像を扱う場合、特定の範囲内で画像を自動的にトリミングして中央揃えにする必要があります。正方形の寸法が生じます。既知の画像サイズに依存する以前のアプローチとは異なり、より堅牢なソリューションが必要です。

効果的なアプローチの 1 つは、背景画像を利用することです。必要な切り抜き寸法に合わせてサイズを調整した要素内の画像を中央に配置することで、目的の結果を得ることができます。

実装例

この基本的な例は、次のアプローチを示しています。

幅: 100px;
高さ: 100px;
背景位置: 中央 center;
背景-リピート: no-repeat;
}

</p>
<pre class="brush:php;toolbar:false">>

< /div>

この例では、 「.center-cropped」クラスは、100ピクセルの正方形の要素を定義します。背景画像の URL は、より大きなサイズのプレースホルダー画像を指します。スタイル設定により、画像が要素内の中央に配置されるようになり、切り取られて中央に配置された正方形の画像が生成されます。

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