CSS3 Pre-Reference



fit

置換要素の拡大・縮小方法

試す





コード

#containe img {
    width: 200px;
    height: 50px;
    fit: fill;
    border: 1px solid red;
}

サンプル

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

fill | hidden | meet | slice
初期値 fill
適用 置換要素
継承 する
レベル 3
%の解釈 -
適用メディア Vidual
参考文献 CSS3 Module: Paged Media#8. The 'fit' and 'fit-position' Properties

解説

高さ、幅両方が'auto'でない場合の、置換要素の拡大の方法について指定します。

例として、以下のイメージをボックス(黒いボーダー辺)に対して指定した場合を示します。

キーワードは以下の通り:

fill
オブジェクトを指定の幅と高さに合うようにリサイズ。
hidden
オブジェクトを等倍で表示。
 
meet
オブジェクトを指定の幅か高さに合うようにリサイズ。縦横比は維持。オブジェクトはコンテントボックス内に収まるようにリサイズします。つまり、幅または高さが指定の幅または高さより小さい可能性があります。
 
slice
オブジェクトを指定の幅か高さに合うようにリサイズ。縦横比は維持。オブジェクトはコンテントボックス外になるようにリサイズします。つまり、幅または高さがボックスの外にはみ出す可能性があります。
 

トラックバック

投稿されたコメント