3

Я тут делал сайт http://emed.testing.vn.ua и заказчик недоволен: при загрузке в хроме скачет полоска под слайдером. Сайт на WordPress и грузит сразу много тяжёлых картинок.

Мне надо, чтобы ну хотя бы жёлтая линия под слайдером оставалась на своём месте от старта загрузки. Прелоадер не катит и зафиксировать высоту слайдера нельзя. Он типа меняет высоту при адаптации. Подскажите, хоть приблизительно, что можно сделать?

2
  • Просто картинку в жёлтом квадрате привяжите к родителю 18 июн 2016 в 19:13
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 19 июн 2016 в 6:01

1 ответ 1

2

Для сохранения пропорций изображения при изменении размера окна, можно воспользоваться следующим трюком с 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, чтобы не разрушить пропорции блока, а содержимое блока должно быть абсолютно позиционировано. Во-вторых, если в слайдере используются картинки с разным соотношением сторон, то содержимое картинок, соотношение сторон которых не совпадает с выбранным, будет обрезано.

Большинство слайдеров нормально обрабатывают таким образом оформленные блоки.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.