HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。
フルードイメージはアスペクト比を固定して拡大縮小しますが、当然幅を縮小したら高さも変化しますし、高さを縮小すると合わせて幅も縮小するようになります。
ところが幅は拡大縮小したいけれども、高さは変更したくない場合があります。
このような場合に「object-fit」プロパティが使えます。
「object-fit」プロパティとは
「object-fit」プロパティは、置換要素、つまりimgタグで挿入された画像やvideoタグで挿入された動画などを、表示領域にどのようにはめ込むか決めるものです。
例
img{
width:100%;
height:300px;
object-fit: cover;
}
この例では高さを固定していますので、通常では幅を伸縮させるとアスペクト比が崩れてしまいます。
けれども「object-fit: cover」を設置するだけで、高さを固定してもアスペクト比を維持しつつ拡大縮小して表示してくれます。
「object-fit」プロパティの値
「object-fit」プロパティの値には次のようなものが用意されています。
fill | contain | cover | none | scale-down
contain：画像はアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、画像が表示されない部分ができます。
contain1サンプル
contain2サンプル
cover：画像はアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。画像のアスペクト比がボックスのアスペクト比と合わない場合は、画像の方がコンテンツボックス合うように切り取られますので画像全てが表示されるわけではありません。
cover1サンプル
cover2サンプル
fill：画像は、要素のコンテンツボックス全体を埋めるサイズになります。画像全体が完全にボックスの中を埋めます。画像のアスペクト比がボックスのアスペクト比と合わない場合は、画像は合うように引き伸ばされます。
fill1サンプル
fill2サンプル
none：画像は、拡大縮小されません。
scale-down：コンテンツは none 又は contain を指定したかのようにサイズが決められ、画像の実際のサイズが小さいほうを採用します。
scale-down1サンプル
scale-down2サンプル
次の例は少し複雑にした例です。
サンプル2
コメントを投稿するにはログインしてください。