CSS辞典 object-fitプロパティ、object-positionプロパティの解説

css辞典 CSS辞典
この記事は約11分で読めます。

画像などのボックスにフィットさせる方法を指定する「object-fit」プロパティ、画像などをボックスに揃える位置を指定する「object-positionプロパティ」の使用方法を記載

CSS3/2.1

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

object-fitプロパティ

初期値 fill
適用される要素 置換要素
モジュール Image Values and Replaced Content Module Level 3
継承 なし

概要・使用方法(スタイル)

{ object-fit:表示方法 ;}

「object-fitプロパティ」は、img要素、video要素、iframe要素などの置換要素をボックスにどうフィットさせる方法を指定します。

指定できる値(表示方法)

fill(初期値)ボックスのサイズに合わせて縦横比を維持せず、全体が見えるようにリサイズして表示する。
containボックスのサイズに合わせて、縦横比を維持したまま、全体が見えるようにリサイズして表示する。
coverボックスのサイズに合わせて、縦横比を維持したまま、トリミングようにリサイズして表示する。
noneボックスのサイズに合わせて、縦横比を維持したまま、リサイズをせずにトリミングして表示する。
scale-down要素のサイズとボックスのサイズを比べて、サイズの小さいほうに合わせて縦横比を維持したまま、全体が見えるようにリサイズして表示する。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>object-fitプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .disp{display:inline-block;}   
          .imgbox{
              width:200px; 
              height:200px;
              background-color:red;
          }
          
          .objectfit-fill{
              object-fit: fill;
          }
          .objectfit-contain{
              object-fit: contain;
          }
          .objectfit-cover{
              object-fit: cover;
          }
          .objectfit-none{
              object-fit: none;
          }
          .objectfit-scaledown{
              object-fit: scale-down;
          }
    </style>
  </head>
  <body>
      <div>
          <div class="disp">
              <h1>fill</h1>
              <img class="imgbox objectfit-fill" src="https://kcfran.com/sample/359600_s.jpg">
          </div>
          <div class="disp">
              <h1>contain</h1>
              <img class="imgbox objectfit-contain" src="https://kcfran.com/sample/359600_s.jpg">
          </div>
          <div class="disp">
              <h1>cover</h1>
              <img class="imgbox objectfit-cover" src="https://kcfran.com/sample/359600_s.jpg">
          </div>
          <div class="disp">
              <h1>none</h1>
              <img class="imgbox objectfit-none" src="https://kcfran.com/sample/359600_s.jpg">
          </div>
          <div class="disp">
              <h1>scale-down</h1>
              <img class="imgbox objectfit-scaledown" src="https://kcfran.com/sample/359600_s.jpg">
          </div>
      </div>
  </body>
</html>
実行結果

fill

contain

cover

none

scale-down

chrome 実行サンプル

object-fitプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

object-fitプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

object-fitプロパティのedgeブラウザの実行結果

opera 実行サンプル

object-fitプロパティのoperaブラウザの実行結果

object-positionプロパティ

初期値 1
適用される要素 すべての要素(::before疑似要素、::after疑似要素を含む)
モジュール CSS Animations Module Level 3
継承 なし

概要・使用方法

{ object-position: 位置;}

「object-positionプロパティ」は、img要素、video要素、iframe要素などの置換要素をボックス内のどの位置に表示させるか指定します。値は半角スペースで区切って2つまで指定できます。1つ目は水平方向、2つ目は垂直方向の位置を指定します。1つだけ指定した場合は、水平・垂直方向に同じ値が適用されます。

指定できる値(位置)

数値+単位位置を単位付きの数値で指定します。
%%値を指定します。値は要素に対する割合となります。
top垂直方向0%と同じです
right水平方向100%と同じです。
bottom垂直方向100%と同じです。
left水平方向0%と同じです。

数値+単位で指定可能な単位は以下を参照

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>object-positionプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .disp{display:inline-block;}
          .imgbox{
              width:200px; 
              height:200px;
              background-color:red;
          }
          
          .objectfit-contain-position{
              object-fit: contain;
              object-position:top left;
          }
          .objectfit-contain{
              object-fit: contain;
          }
    </style>
  </head>
  <body>
      <div>
          <div class="disp">
              <h1>positionプロパティ 指定なし</h1>
              <img class="imgbox objectfit-contain" src="https://kcfran.com/sample/359600_s.jpg">
          </div>
          <div class="disp">
              <h1>positionプロパティ top left</h1>
              <img class="imgbox objectfit-contain-position" src="https://kcfran.com/sample/359600_s.jpg">
          </div>
      </div>
  </body>
</html>
実行結果

positionプロパティ 指定なし

positionプロパティ top left

chrome 実行サンプル

object-positionプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

object-positionプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

object-positionプロパティのedgeブラウザの実行結果

opera 実行サンプル

object-positionプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました