imgラベルcssサイズの設定

637 ワード

object-fitを介してコンテナ内で画像をソートする方法を簡単に理解しましょう.
まず、以下のimgタグのcssコードの例を表示します.
img {
	width: 300px;
    height: 150px;
    object-fit: cover;
}
ここでwidthおよびheightは、img srcが占有するサイズを表す.
object-fitのプロパティ値に基づいて画像を設定する方法について説明します.
object-fit: fill;
//デフォルトでは、指定した幅と高さに応じてサイズを調整し、画像のスケールは保持されません.
object-fit: contain;
//指定した幅と高さにスケールを調整し、
//イメージスケールがコンテナスケールと一致しない場合、空の位置が残ります
object-fit: cover;
//指定した幅と高さにスケールを調整し、
//イメージスケールがコンテナスケールと一致しない場合は、拡大してコンテナを埋めます
object-fit: none;
//既存の画像サイズを維持し、画像を中央にします.
object-fit: scale-down;
画像サイズを//noneまたはcontainsのより適切な方向に調整します.