指定なし。
縦値を指定して、上要素にoverflow: hidden;
object-fit「fill」
こちらも並びは揃っています。初期値の「fill」では縦横比は無視しますので、画像が歪みます。また初期値なので「object-fit: fill;」は省略しても同じ結果になります。
object-fit「contain」
こちらも並びは揃っています。縦横比が崩れているわけでもないですがコンテナーに余白が出ています。
object-fit「cover」
画像はコンテナーいっぱいに余白が出ることなくフィットしています。かつ、縦横比は維持し、位置は縦横中央になり、はみ出す部分はトリミングされています。
object-fit「cover」 + object-position: 0% 0%;
画像の位置を指定します。指定の仕方は「object-position:’横の位置’ ‘縦の位置’;」となります。位置の指定は「％」、「px」や「top」・「center」という指定もできます。初期値は「object-position:50% 50%」で縦横中央に配置します。
object-fit「none」
画像がリサイズされずに元のサイズで表示されますので、コンテナーより画像が小さい場合は余白が出ています。
#box_b figure {
height: 250px;
overflow: hidden;
}
#box_c figure img {
object-fit: fill;
height:250px;
}
#box_d figure img {
object-fit: contain;
height:250px;
}
#box_e figure img {
object-fit: cover;
height:250px;
}
#box_e2 figure img {
object-fit: cover;
object-position: 0% 0%;
height:250px;
}
#box_f figure img {
object-fit: none;
height:250px;
}