cman.jp > WEBページ作成TOP > CSSリファレンス > 「ボックスに合わせた画像サイズの調節」
WEBページ作成
広告
object-fit 「ボックスに合わせた画像サイズの調節」
object-fitは、画像などのサイズを自動調整するプロパティです。レスポンシブWebデザインを行うときに非表示便利ですが、IEやEdgegが対応していないため、実際に使用するにはまだ時間が掛かる見込みです。
2017年5月時点でIEやEdgeは対応していませんのでご注意ください。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | する |
広告
object-fitの指定方法
| 構文 | |
|---|---|
|
object-fit : [ fill | cover | contain | none | scale-down ]; |
|
| プロパティ | 意味 |
| object-fit: fill; | 縦横比は無視され、指定サイズとなります |
| object-fit: cover; | 縦横比は維持され、縦または横の長い方に合されトリミングされます |
| object-fit: contain; | 縦横比は維持され、縦または横の短い方に合されます |
| object-fit: none; | サイズは調整されずにそのままトリミングされます |
| object-fit: scale-down; | noneまたはcontainの、サイズがが小さくなる方を適用します |
|
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期値」を参照 |
|
object-fit のサンプル
<style type="text/css">
#sample-area div {
display : inline-block;
width : 310px ;
border : 1px solid #ccc;
margin : 3px;
padding : 5px;
text-align : center;
}
#sample-area p {
height : 20px;
margin : 3px 0;
font-weight: bold;
}
#sample-area img {
width : 250px; /* 下のサンプルで変更される */
height : 110px; /* 下のサンプルで変更される */
}
#fit-fill { object-fit : fill }
#fit-cover { object-fit : cover }
#fit-contain { object-fit : contain }
#fit-none { object-fit : none }
#fit-scale-down { object-fit : scale-down }
</style>
<html>
<div id="sample-area">
<div><p>fill</p><img src="./img1.jpg" id="fit-fill"></div>
<div><p>cover</p><img src="./img1.jpg" id="fit-cover"></div>
<div><p>contain</p><img src="./img1.jpg" id="fit-contain"></div>
<div><p>none</p><img src="./img1.jpg" id="fit-none"></div>
<div><p>scale-down</p><img src="./img1.jpg" id="fit-scale-down"></div>
</div>
</html>
IEは非対応のため正しく動作しません。
| 幅変更 | ||
|---|---|---|
| 高さ変更 |
fill
cover
contain
none
scale-down
2017年5月時点でIEやEdgeは対応していませんのでご注意ください。
ページTOP| 関連するCSS(STYLE) | |
|---|---|
| object-position | ボックス内での画像の表示位置 |
広告