Layout: Fotorama

С Фоторамой на адаптивном сайте есть одна неприятность - мы заранее не знаем высоту картинки, не можем поставить ее в css и поэтому, когда плагин загрузится и подкачает изображение - контент “пргынет”. Есть один прием, заключается он в обертке изображения в контейнер с процентным паддингом (от ширины) и выставлении картинки position:absolute. Работает, естественно, если мы знаем заранее соотношение сторон картинки. Можно и нужно применять этот метод не только для фоторамы, но и для остальных изображений с заранее известным aspect ration во избежания так называемого reflow.

Итак в контейнер фоторамы надо добавить два класса: embed-container и соответствующий изображению ratio-* класс. Пример:

<div class="fotorama embed-container ratio-16-9"
          data-auto="false"
          data-nav="false"
          >
          <a href="http://www.widewallpapers.ru/mod/nature/1600x900/nature-wallpaper-1600x900-003.jpg"></a>
          <a href="http://emgi3m.992766.n3.nabble.com/file/n2551926/white_and_red_audi_1600x900.jpg"></a>
</div>

В _settings_common.scss должны быть строчки:

$ratio-16-9: (9%/16%*100%);
$ratio-4-3: (3%/4%*100%);
$ratio-1-1: (100%);

А в app.scss:

.embed-container {
	position: relative;
	height: 0;
	overflow: hidden;
	img, .element {
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height:100%;
	}
}

.ratio-16-9 { padding-bottom: $ratio-16-9; }
.ratio-4-3  { padding-bottom: $ratio-4-3; }
.ratio-1-1  { padding-bottom: $ratio-1-1; }