Как сделать, чтобы картинка все время не прыгала из-за разной высоты?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/VwwoLrd

Когда я начинаю скролить вниз и листаю слайды, то у меня контент все время прыгает:

Как можно сделать, чтобы при изменение высоты у картинки контент все время не прыгал ?

Answer 1

[Kappy]

Замените css на это

* {
  box-sizing: border-box;
}

:focus {
  outline: 0;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

.wrapper {
  margin-bottom: 50%;
}

.photo {
  position: relative;
  display: inline-block;

  margin-bottom: 5px;
}

.photo > img{
   width: 400px;
  height:400px;
}


.slider {
  width: 400px;
}

Comments

[Genri_Rus]

Тогда картинка, у которой маленький размер теряет качество

А мне нужно, чтобы картинка была в исходном качестве

Answer 2

[oink]

Как вариант - добавить min-height: 400px; для .photo

Comments

[Genri_Rus]

Не помогло: https://codepen.io/Genri_Rus/pen/VwwoLrd

[oink]

Genri_Rus, в чем причина - пока не понял, но это фишка отображения в маленьком окошке. Если сменить раскладку просмотра или растянуть окно просмотра так, чтобы слайдер и элементы управления влезали целиком, прыгать ничего не будет.

[Genri_Rus]

oink, когда я скролю вниз, то при перемотке слайдов весь контент, который внизу автоматически поднимается вверх

Допустим картинка высотой 300px, в следующем слайде картинка высотой 200px

Так вот та картинка, у которой высота 200px поднимает весь контент вверх, который расположен внизу

[oink]

Genri_Rus, я к тому, что на настоящей странице, не на codepen, этого не будет. Отступы везде, где нужно, всегда одинаковые.

[Genri_Rus]

oink, в full варианте также есть: https://codepen.io/Genri_Rus/full/VwwoLrd

[oink]

Genri_Rus, у меня нет ни в одном браузере, странно.
https://i.postimg.cc/7Z1Mzyzp/gif.gif

[Genri_Rus]

oink, проблема начинается только тогда, когда я скролю вниз

P.S. Как вы гифку сделали ?

[oink]

Genri_Rus, да, я понял. Смещение происходит только тогда, когда контент над слайдером за пределами вьюпорта. В остальных случаях работает нормально. Можно посмотреть тут:
https://codepen.io/schegol/full/WNbeBjL
Причину пока ищу.

Гифку сделал с помощью программы LICEcap. Рекомендую, гибкая, легкая, простая в обращении.

[Genri_Rus]

oink, спасибо большое, очень рад что вы поняли в чем проблема

[oink]

Genri_Rus, в том и дело, что пока не понял :) Но если вставить на реальный сайт, мешать не должно.

[Genri_Rus]

oink, если смотреть с ноутбука, то есть

[Genri_Rus]

oink, так и не разобрались в чем дело ?

[oink]

Genri_Rus, к сожалению, нет.