[解決済み] 画像を自動的に切り抜き、中央に配置する方法
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-fit
と
object-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" />
関連
-
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題(原理から実装まで)
-
[CSSレイアウト例】CSSで中央揃えを実現する方法N種
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] CSS 画像サイズ、どのように埋めるために、しかし、ストレッチしない?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[css3]css3におけるtransformプロパティの4つの機能
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
[css3]CSS3アニメーションによる光のボタンの流れの効果
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[解決済み] CSSで画像をリサイズ、トリミングして表示する