圧縮や変形のない CSS-picture 表示固定サイズ

詳細については、https://timor419.github.io/2020/04/19/CSS-img/ を参照してください。

必要性の説明:

長方形の画像を変形せずに正方形に表示する効果を得るには、背景画像として設定する方法と img タグを使用する方法の 2 つが一般的です。

元画像↓：

背景画像↓：

---

1.背景画像

まず、主に background-size 属性を使用して背景画像のズーム率を設定することで、背景画像を設定することでニーズを達成する方法を見てみましょう。

background-size を簡単に紹介します。

background-size: contain; ズーム比を自動的に調整して、画像をトリミングせずに背景領域に画像が常に完全に表示されるようにします

background-size: cover; 画像は比例してスケーリングされ、オーバーフローがある場合はトリミングされて非表示になります

コード上で直接言うことはあまりありません：

HTML

<div class="bgc"></div>

CSS

.bgc {
    
    
	width:500px;
	height: 500px;
	background: url("images/1.jpeg") no-repeat center;
	background-size: cover;
}

二、imgタグ

開発過程では、バックエンドから返された画像を変形せずに正方形として表示する必要があることが多く、主に css の object-fit 属性によって img タグを使用します。

HTML

<img src="images/1.jpeg" class="img">

CSS

.img{
    
    
	width:500px;
	height: 500px;
	object-fit: cover;
  flex: 1;
}

- - - - - - - 終わり - - - - - - -

使用許諾契約: 転載の場合は、元のリンクと作成者を保管してください。