Dimensions
Fotorama’s dimensions are the dimensions of the first image. Other pictures are scaled proportionally to fit.
To reserve the space on the page before the first image is loaded, use data-width and data-height:
<div class="fotorama"
data-width="800"
data-height="600">
<img src="1.jpg">
<img src="2.jpg">
</div>
Responsive
To make fotorama responsive, define width in percents and aspect ratio:
<div class="fotorama"
data-width="100%"
data-ratio="800/600">
<!-- ↑ The same as data-ratio="4/3"
or data-ratio="1.3333333333". -->
<img src="1.jpg">
<img src="2.jpg">
</div>
Responsive example (new window):
Constrain fotorama’s size to a certain range with data-minwidth, data-maxwidth, data-minheight, and data-maxheight:
<div class="fotorama"
data-width="100%"
data-ratio="800/600"
data-minwidth="400"
data-maxwidth="1000"
data-minheight="300"
data-maxheight="100%">
<img src="1.jpg">
<img src="2.jpg">
</div>
Example: Constrained
Relative height is calculated based on inner height of the window. A height of 100% covers the entire browser window:
<body style="margin: 0;">
<div class="fotorama"
data-width="100%"
data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
</div>
</body>
Example: Full window