imgピクチャ表示スタイルの最適化

object-fit

时には画像のサイズが展示のサイズに合わないと画像を引き延ばすのがみっともないことがあります.object-fitというcss属性は良い効果を示すことができます.

.example{
	width:160px;
	height:90px;
	object-fit:cover;
}

object-fitキー属性

object-fit:fill

置換されたコンテンツサイズは、要素のコンテンツボックスに入力できます.オブジェクト全体がこのボックスに完全に埋め込まれます.オブジェクトのアスペクト比がボックスのアスペクト比に一致しない場合、オブジェクトは適応するようにストレッチされます.

object-fit:contain

置換されたコンテンツは、要素のコンテンツボックスを塗りつぶすときにアスペクト比を維持するようにスケールされます.オブジェクト全体がボックスを塗りつぶしながらアスペクト比を保持するため、アスペクト比がボックスのアスペクト比と一致しない場合は、オブジェクトに黒いエッジ(Black Edge)が追加されます.

object-fit:cover

置換されたコンテンツサイズは、要素のコンテンツボックス全体を塗りつぶしながら幅比を維持します.オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合、オブジェクトはクリップされて適応されます.

object-fit:none

置き換えられたコンテンツのサイズは変更されません.

object-fit:scale-down

コンテンツのサイズは、noneまたはcontainが指定されているように、どちらがより小さなオブジェクトサイズになるかによって異なります.object-fitグローバル・プロパティ

object-fit: inherit;

object-fit: initial;

object-fit: unset;

————tbc——————