Для сохранения пропорций изображения при изменении размера окна, можно воспользоваться следующим трюком с padding
, который позволит зарезервировать место под картинку, не указывая конкретное значение для высоты:
.parent {
padding-bottom: 33.33%;
position: relative;
width: 100%,
height: 0;
}
.child {
background: url('https://satyr.io/1200x768/400') 50% 50%/cover no-repeat #fff;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="parent">
<div class="child"></div>
</div>
Изменить размер окна для проверки вы можете в аналогичном примере на jsFiddle.
Сделав так, как показано в примере, вы зарезервируете место под картинку еще до ее загрузки и полоска никуда скакать не будет. К слову, это не зависит от браузера, как вы думаете.
Что здесь происходит: padding-bottom: 33.33%;
говорит о том, что высота картинки относится к ее ширине как один к трем. Настоящий размер картинки 1200x768 пикселей, но благодаря 50% 50%/cover
мы видим только центральную часть картинки, после того, как она была пропорциональна вписана по ширине.
Почему так происходит: padding-bottom
зависит от ширины блока. Повторюсь, указывая 33.33%
процента, мы как бы говорим, что нам нужна высота, равная 1/3 от ширины. Если бы нужна была пропорция картинки 4:3
, то для padding-bottom
нужно было бы указать значение, равное 3 / 4 * 100%
или 75%
. Если бы нужно было соотношение сторон для изображения 16:9
, то для padding-bottom
нужно было бы указать значение, равное
9 / 16 * 100%
или 56.25%
.
Увы, данный подход имеет недостатки. Во-первых, мы не можем использовать свойство height
при такой комбинации. Высота должна быть равна 0, чтобы не разрушить пропорции блока, а содержимое блока должно быть абсолютно позиционировано. Во-вторых, если в слайдере используются картинки с разным соотношением сторон, то содержимое картинок, соотношение сторон которых не совпадает с выбранным, будет обрезано.
Большинство слайдеров нормально обрабатывают таким образом оформленные блоки.