HTML5 & CSS3 リファレンス - object-fit プロパティ（画像のサイズ調整の指定）

CSS3: object-fit プロパティ - 画像のサイズ調整の指定

■ 概要

項　　目	説　　明
記述形式	セレクタ {object-fit: 値 }
値の形式	fill，contain，cover，none，scale-down
初期値	fill
対応ブラウザー	C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素	置換要素
継　　承	しない

■ 解説

object-fitプロパティ は，サイズが指定された置換要素のボックスに画像などのコンテンツをフィットさせる方法 を指定します。

object-fitプロパティは，「CSS Paged Media Module Level 3」ワーキンググループの 2006年10月10日の草案では， fitプロパティという名前でした。　最新の草案（2013年3月14日）では， object-fitプロパティ に改名されたことが述べられています。

値	説　　明
fill	置換要素のコンテンツボックスのサイズにちょうど合うようにコンテンツの幅と高さを調整します。
contain	画像などのコンテンツの縦横比（aspect ratio）は保持したまま，コンテンツボックスに全体が収まる最小のサイズに調整します。
cover	画像などのコンテンツの縦横比（aspect ratio）は保持したまま，コンテンツボックスを完全に埋める最小のサイズに調整します。
none	サイズ調整をしません。
scale-down	none と contain による調整結果のうち小さくなる方にコンテンツのサイズを調整します。

object-fitプロパティのキーワードによる値の指定方法は，background-sizeプロパティと似ていますが，数値による指定方法はありません。

■ 使用例（ object-fit プロパティの利用）

HTMLソース
CSS <head> ～ </head>	<style type="text/css"> <!-- div.float { float: left} img.sample { width: 250px; height: 150px; border: 2px solid #8c8c8c; background-color: yellow; } .fit1 { object-fit: fill; } .fit2 { object-fit: contain; } .fit3 { object-fit: cover; } .fit4 { object-fit: none; } .fit5 { object-fit: scale-down; } --> </style>
HTML <body> ～ </body>	<div class="float" > <div><img src="../logo.gif" class="sample fit1"></div> <div><img src="../logo.gif" class="sample fit2"></div> <div><img src="../logo.gif" class="sample fit3"></div> <div><img src="../logo.gif" class="sample fit4"></div> <div><img src="../logo.gif" class="sample fit5"></div> </div> <div class="float" > <div style="margin: 120px 0 0 120px;"> <div><img src="../logo.gif"></div> </div> </div>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css">
<!-- 
   div.float { float: left}
   img.sample {
      width: 250px;
      height: 150px;
      border: 2px solid #8c8c8c;
      background-color: yellow;
   }
   .fit1 { object-fit: fill; }
   .fit2 { object-fit: contain; }
   .fit3 { object-fit: cover; }
   .fit4 { object-fit: none; }
   .fit5 { object-fit: scale-down; }
-->
</style>

HTML
<body> ～ </body>

<div class="float" >
   <div><img src="../logo.gif" class="sample fit1"></div>
   <div><img src="../logo.gif" class="sample fit2"></div>
   <div><img src="../logo.gif" class="sample fit3"></div>
   <div><img src="../logo.gif" class="sample fit4"></div>
   <div><img src="../logo.gif" class="sample fit5"></div>
</div>
<div class="float" >
   <div style="margin: 120px 0 0 120px;">
      <div><img src="../logo.gif"></div>
   </div>
</div>

ブラウザー表示例　（IE では正しく表示できません）
↑ { object-fit: fill; } の表示 ↑ { object-fit: contain; } の表示 ↑ { object-fit: cover; } の表示 ↑ { object-fit: none; } の表示 ↑ { object-fit: scale-down;; } の表示 ↑ 元の画像　（logo.gif）

■ 備考

【参考ページ】

「HTMLクイックリファレンス」の「object-fit プロパティ」のページ
「ねこだまのCSSリファレンス&デモ」の「object-fit プロパティ」のページ
「W3C」の「object-fit プロパティ」のページ