CSS はどのようにしてサイズが不明な画像を動的に中央揃えにしてトリミングできるのでしょうか?

中央の画像のトリミングと配置: 動的ソリューション

画像操作の領域では、画像を抽出して表示する必要がよくあります。任意の画像から中央の正方形を抽出します。ただし、画像サイズが不明な場合、従来のトリミング方法は実用的ではありません。この課題に対処するために、革新的なソリューションが登場しました。

CSS の背景の位置決めと要素のサイズ変更テクニックを活用して、指定された正方形内で画像を効果的に中央に配置して切り抜くことができます。希望の切り抜き寸法に一致するサイズの要素の中心に背景画像を設定することで、希望の効果を実現できます。

基本的なデモ

このアプローチを説明するには:

<div class="center-cropped" 
    >

この HTML スニペットは、「center-cropped」クラスの div 要素を作成します。次に、CSS でスタイルを設定します。

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

ここでは、幅と高さを設定して、トリミングされた画像のサイズを指定します。 Background-position プロパティは要素内の画像を中央に配置し、background-repeat は画像が並べて表示されたり繰り返したりするのを防ぎます。 style 属性の URL はプレースホルダー画像であることに注意してください。実際の画像の URL に置き換える必要があります。

以上がCSS はどのようにしてサイズが不明な画像を動的に中央揃えにしてトリミングできるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。