Подгонка

Есть 4 способа поместить изображение в fotorama:

'contain' (по умолчанию). Растяжение изображения, которое будет полностью отображаться при установке в fotorama.
'cover'. Растяжение и обрезка изображения, чтобы полностью покрыть fotorama.
'scaledown'. Растягивание изображения, если оно больше, чем fotorama.
'none'. Использование собственных размеров изображения.

Выберите подходящий для всей фоторамы и переопределите его для одного изображения с подгонкой данных:

<div class="fotorama"
 data-fit="cover">
<img src="1.jpg">
<img src="2.jpg" data-fit="contain">
</div>

Пример с изображением, выходящим за рамки

Примечание. Для наглядности было добавлено css-правило .fotorama__stage {border:1px solid black;}.

Есть изображение 200×300 пикселей:

cake

... fotorama подгоняет такое изображение в рамки 240 × 180 следующим образом:

contain

<div class="fotorama"
 data-fit="contain" data-width="240" data-ratio="240/180">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
</div>

cover

<div class="fotorama"
 data-fit="cover" data-width="240" data-ratio="240/180">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
</div>

scaledown

<div class="fotorama"
 data-fit="scaledown" data-width="240" data-ratio="240/180">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
</div>

none

<div class="fotorama"
 data-fit="none" data-width="240" data-ratio="240/180">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
 <img src="http://fotorama.ucoz.org/images/cake200300.jpg">
</div>

Пример с изображением меньше рамки

Есть изображение 200×125 пикселей: