Слайдер изображений в CSS /HTML

Question

Я создал сайт, на котором есть Image Slider. Но все мои изображения имеют разный размер, поэтому, когда изображение меняется, страница также прокручивается... Пожалуйста, помогите мне исправить это. Я предоставляю ссылку для демонстрации. Нажмите здесь для демонстрации Для лучшего посещения, уменьшив размер браузера.

Answer 1

Отредактируйте все изображения с одинаковой высотой, это решит вашу проблему. Вы можете редактировать изображения во многих программах, лучше всего рисовать

Answer 2

Можете добавить

.mySlides {
    height: 1000px;
    overflow: hidden;
}

к вашей таблице стилей, но обратите внимание, что это обрезает ваши изображения, если они выше, чем 1000px и оставит пробел ниже, если они короче. Вы можете использовать любое значение вместо 1000px,

Тем не менее, это плохой обходной путь. Лучший способ сделать это - изменить размер всех ваших изображений до одинаковой высоты.

Answer 3

Чтобы решить вашу проблему, вам нужно использовать постоянный размер изображения - это решит проблему с высотой. Просто создайте 5 изображений размером 1000 на 500 пикселей и используйте их для всех слайдов. Если вы хотите, чтобы у каждого изображения был разный размер, вам понадобится "белая рамка" или разная высота.

Answer 4

Вы не можете иметь другой элемент высоты и кроме того, что вы хотите. По крайней мере, за один шаг вы должны зафиксировать высоту слайдера, вы можете сделать это:

.w3-content {
  height: 700px;
  overflow: hidden;
}

Или же

.mySlides {
   height: 700px;
   overflow: hidden;
}

Помните, что 1000px вам не поможет, потому что некоторые изображения имеют высоту меньше 1000px. Вам нужно выбрать наименьшую высоту в качестве фиксированной высоты;