1. ホーム
  2. css

[解決済み] 画像を自動的に切り抜き、中央に配置する方法

2022-04-22 22:50:49

質問

任意の画像が与えられたとき、画像の中心から正方形を切り出し、与えられた正方形の中に表示したい。

この質問はこれに似ています。 CSS 画像をリサイズしてトリミングして表示する が、画像のサイズが分からないので、設定した余白を使うことができません。

どうすればいいですか?

1つの解決策は、切り取られた寸法に合わせたサイズの要素内に、背景画像を中央に配置することです。


基本的な例

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}
<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>


を使った例 img タグ

このバージョンでは img タグを使用することで、ドラッグや右クリックで画像を保存する機能を失わないようにしました。クレジット パーカー・ベネット は不透明度のトリックです。

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

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}
<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>


object-fit / -position

対応ブラウザを見る .

があります。 CSS3画像仕様 を定義しています。 object-fitobject-position の画像コンテンツの拡大縮小や位置の制御を可能にするプロパティです。 img 要素で構成されています。これらにより、期待通りの効果を得ることができます。

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}
<img class="center-cropped" src="http://placehold.it/200x200" />