Fotoramaのステージコンテナの大きさ Dimensions Fotorama デモ

Fotoramaステージの大きさの固定的な設定

画像が表示されるFotoramaステージ領域の大きさは、最初の画像のサイズで確保されます（デフォルト）。
その他の画像は、フィットするように比例してスケーリングされます（Fitオプション参照）。
最初の画像がロードされる前に、Fotoramaステージ の領域を確保するには、オプションdata-width（横幅）とdata-heigt（高さ）をピクセル値で指定します。

HTML

<div class="fotorama" data-width="800" data-height="600">
  <img src="images/f/P2200022.jpg" alt="桜"> <!--2560X1920 8/6-->
  <img src="images/akb/MelodyL-A-w640.jpg">  <!--640X480 8/6-->
  <img src="images/akb/Melody-mv01-w640.jpg">  <!--640X355 横長-->
  <img src="images/akb/sakura-w350.jpg">     <!--350X525 縦長-->
  <img src="images/akb/MelodyL-x-w470.jpg">  <!--470X470 小さい正方形-->
  <img src="images/akb/MelodyL-A2.jpg">      <!--1200X1200 大きい正方形 以下同じ -->
  <img src="images/akb/MelodyL-B.jpg">
  <img src="images/akb/MelodyL-C.jpg">
  <img src="images/akb/MelodyL-D.jpg">
  <img src="images/akb/MelodyL-E.jpg">
  <img src="images/akb/MelodyN-A.jpg">
  <img src="images/akb/MelodyN-B.jpg">
  <img src="images/akb/MelodyN-C.jpg">
  <img src="images/akb/MelodyN-D.jpg">
  <img src="images/akb/MelodyN-E.jpg">
</div>

デモ（画像１５枚）サイズ：上HTML参照
桜
Fotoramaステージの大きさが800X600pxの場合、ステージに実際に表示される画像の大きさはつぎのようになります。
ただし、オプションfitを省略またはfit='contain'を指定した場合。
画像No.画像の大きさ（実寸）ステージに表示される画像の大きさ備考
１枚目Fotoramaステージと同じレシオ(8対6) - 2560X1920800X600 - ステージの大きさに比例して縮小
２枚目Fotoramaステージと同じレシオ - 640X480800X600 - ステージの大きさに比例して拡大注１
３枚目横長 - 640X355800X444 - ステージの横幅に比例して拡大注１
４枚目縦長 - 350X525400X600 - ステージの高さに比例して拡大注１
５枚目正方形 - 470X470600X600 - 拡大注１
６枚目以降正方形 - 1200X1200600X600 - 縮小
（注１）Fotoramaステージの大きさより小さい画像を実寸サイズで表示したい場合は、オプションfit='scaledown'を指定します。

Fotoramaステージの大きさの柔軟な設定

柔軟な設定には、Dimensionsオプションには、data-ratio,data-minwidth,data-maxwidth,data-minheight,data-maxheightを使用します。

大きさのレスポンシブな指定：data-widthとdata-ratioの組み合わせ

HTML

<div class="fotorama" data-width="100%" data-ratio="800/600" data-fit="scaledown">
  <img src="images/f/P2200022.jpg" alt="桜"> <!--2560X1920 8/6-->
  <img src="images/akb/MelodyL-A-w640.jpg">  <!--640X480 8/6-->
  <img src="images/akb/Melody-mv01-w640.jpg">  <!--640X355 横長-->
  <img src="images/akb/sakura-w350.jpg">     <!--350X525 縦長-->
  <img src="images/akb/MelodyL-x-w470.jpg">  <!--470X470 小さい正方形-->
  <img src="images/akb/MelodyL-A2.jpg">      <!--1200X1200 大きい正方形 以下同じ -->
  <img src="images/akb/MelodyL-B.jpg">
  <img src="images/akb/MelodyL-C.jpg">
  <img src="images/akb/MelodyL-D.jpg">
  <img src="images/akb/MelodyL-E.jpg">
  <img src="images/akb/MelodyN-A.jpg">
  <img src="images/akb/MelodyN-B.jpg">
  <img src="images/akb/MelodyN-C.jpg">
  <img src="images/akb/MelodyN-D.jpg">
  <img src="images/akb/MelodyN-E.jpg">
</div>

デモ（画像１５枚）サイズ：上HTML参照
桜

大きさを制限する指定：data-minwidth,data-maxwidth,data-minheight,data-maxheight

HTML

<div class="fotorama" data-width="100%" data-ratio="800/600" data-minwidth="400"
                         data-maxwidth="1000" data-minheight="300" data-maxheight="100%">  
     <!-- data-width 横幅を100%で指定 --><!-- data-ratio 横幅800対高さ600の比率（レシオ）で指定 -->
     <!-- data-minwidth 横幅の最小値を400pxで指定 --><!-- data-maxwidth 横幅の最大値を1000pxで指定 -->
     <!-- data-minheight 高さの最小値を300pxで指定 --><!-- data-maxheight 高さの最大値を100%で指定  -->
  <img src="images/f/P2200022.jpg" alt="桜"> <!--2560X1920 8/6-->
  <img src="images/akb/MelodyL-A-w640.jpg">  <!--640X480 8/6-->
  <img src="images/akb/Melody-mv01-w640.jpg">  <!--640X355 横長-->
  <img src="images/akb/sakura-w350.jpg">     <!--350X525 縦長-->
  <img src="images/akb/MelodyL-x-w470.jpg">  <!--470X470 小さい正方形-->
  <img src="images/akb/MelodyL-A2.jpg">      <!--1200X1200 大きい正方形 以下同じ -->
  <img src="images/akb/MelodyL-B.jpg">
  <img src="images/akb/MelodyL-C.jpg">
  <img src="images/akb/MelodyL-D.jpg">
  <img src="images/akb/MelodyL-E.jpg">
  <img src="images/akb/MelodyN-A.jpg">
  <img src="images/akb/MelodyN-B.jpg">
  <img src="images/akb/MelodyN-C.jpg">
  <img src="images/akb/MelodyN-D.jpg">
  <img src="images/akb/MelodyN-E.jpg">
</div>

デモ（画像10枚　サイズ：上HTMLコード参照、高さ450）

桜
（AKB48's Photos by 楽天ブックス）

大きさをフルスクリーンで指定：data-width="100%",data-height="100%"

・HTML

<body style="margin: 0; overflow: hidden; background: #000; position: relative;">

<div class="fotorama" data-width="100%" data-height="100%" data-fit="none" data-nav="none">
                               <!-- OR data-fit="cover" -->
  <img src="images/f/full-01.jpg">
  <img src="images/f/full-02.jpg"> 
  <img src="images/f/full-03.jpg">
  <img src="images/f/full-04.jpg">
  <img src="images/f/full-05.jpg">
  <img src="images/f/full-06.jpg">
  <img src="images/f/full-07.jpg">
  <img src="images/f/full-08h.jpg">
  <img src="images/f/full-09h.jpg">
  <img src="images/f/full-10h.jpg">
</div>

・デモ

フルスクリーンのため新しいウィンドーでデモ

photo by pixabay.com ／ photo by (c)Tomo Yun ／ AKB48's Photo by 楽天ブックス ／ powered by Fotorama (c) Artem Polikarpov

  最終更新日：2016.3.8(初版）