Невозможно заставить Slider реагировать

Невозможно заставить Slider реагироватьI столкнулся с проблемой. Я пытаюсь создать полноэкранный слайдер изображений с адаптивными изображениями. Я пробовал все комбинации: Добавить стиль высота: 100%, ширина: 100%, высота: авто, ширина: авто в HTML в CSS, но ничего не работает. Я покажу вам код, возможно, я сделал что-то не так. Я не могу добавить фрагмент кода, потому что он не отображает изображения, и это много кода и классов. Эта проблема сводит меня с ума, я ищу решение в течение 4 часов. Невозможно заставить Slider реагировать

HTML

<div id = "showcase">
    <div id = "arrow-left" class = "arrow"></div>
    <div id = "slider">
      <div class = "slide slide1"></div>
      <div class = "slide slide2 "></div>
      <div class = "slide  slide3"></div>
    </div>
    <div id = "arrow-right" class = "arrow"></div>
  </div>

CSS

#showcase,
#slider,
.slide-content {
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

#showcase {
  position: relative;
  height: 100%;
  width: 100%;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide1 {
  background: url(/Core/img/lazar1.jpg) no-repeat center center/cover;
}

.slide2 {
  background: url(/Core/img/lazar2.jpg) no-repeat center center/cover;
}

.slide3 {
  background: url(/Core/img/lazar3.jpg) no-repeat center center/cover;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent blue transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent blue transparent blue;
  right: 0;
  margin-right: 30px;
}

Вы пытались установить 100vw и 100vh для ширины и высоты соответственно?

Christopher Bennett 01.05.2019 09:34

Да, не работает.

user11261905 01.05.2019 09:38

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

Christopher Bennett 01.05.2019 09:45

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

user11261905 01.05.2019 09:49

Ok. Я скопировал ваш код в свой браузер и использовал несколько тестовых изображений (потому что у меня нет доступа к вашему). Единственное, что я изменил, это то, что я установил единицы вашего класса .slide на vw и vh для ширины и высоты, и изображения (для меня) появляются на весь экран и масштабируются соответствующим образом, когда я изменяю размер окна. Я знаю, вы сказали, что пробовали это раньше, но во всех комбинациях вы могли пропустить это. Можете ли вы попробовать это и дайте мне знать, если это работает?

Christopher Bennett 01.05.2019 10:01

Я отредактировал сообщение и скопировал некоторые изображения, пожалуйста, посмотрите.

user11261905 01.05.2019 10:08

Мое последнее предложение не сработало?

Christopher Bennett 01.05.2019 10:11

Извините, только что увидел. В вашем коде должно быть что-то лишнее (либо HTML, либо CSS), чего нет в моем, что мешает этому. Я посмотрю более внимательно на ваш пример. Тем не менее, я озадачен, почему это работает для меня, а не для вас.

Christopher Bennett 01.05.2019 10:22

Хорошо, извините за все вопросы (даже если некоторые глупые), я просто пытаюсь рассмотреть все возможности. Во-первых, вы не забыли добавить тег окна просмотра <meta>? Во-вторых, какого размера (в пикселях) изображения, которые вы используете? И, наконец, что произойдет, если вы используете vw для высоты, а не для ширины?

Christopher Bennett 01.05.2019 10:29

в моем коде ничего нет, я проверил кодовой ручкой, и кодовая ручка дает мне то же самое

user11261905 01.05.2019 10:35
codepen.io/ConsttantinAk98/pen/MRMgap
user11261905 01.05.2019 10:35

когда я изменяю размер из угла, это не работает. Также большое спасибо за ваши усилия

user11261905 01.05.2019 10:38

Без проблем. Кажется, я вижу, что происходит - когда страница сжимается по ширине, изображение начинает сжиматься. Как только изображение сжимается до исходной высоты, оно перестает сжиматься, и ширина начинает переопределяться. Вопрос в том, почему. Я немного поиграюсь с codepen и посмотрю, смогу ли я что-нибудь придумать.

Christopher Bennett 01.05.2019 10:42

Понятно. Я действительно должен был подумать об этом раньше. Сайт, который вы используете в качестве примера, использует медиа-запросы для уменьшения высоты div .slide в определенных точках останова. Проверьте эту скрипку --- jsfiddle.net/26fjemko/3

Christopher Bennett 01.05.2019 11:01

Лол... Я думал, что пропалs a property that I. Большое спасибо, если вы можете опубликовать ответ, я дам вам этот зеленый чек, если вам нужно. Будьте здоровы!

user11261905 01.05.2019 11:04

Звучит как сделка. Дай мне минуту.

Christopher Bennett 01.05.2019 11:06
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
16
51
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Чтобы решить эту проблему, для адаптивного дизайна используйте медиа-запросы. Ссылающаяся страница использует медиа-запросы в определенных контрольных точках ширины, чтобы уменьшить высоту div, содержащего изображения, чтобы позволить экрану уменьшаться по ширине, при этом отображая изображение с неповрежденным соотношением сторон (поскольку это довольно широкие изображения) . Пример в коде будет выглядеть так:

//HTML
<div id = "showcase">
    <div id = "arrow-left" class = "arrow"></div>
    <div id = "slider">
      <div class = "slide slide1"></div>
      <div class = "slide slide2 "></div>
      <div class = "slide  slide3"></div>
    </div>
    <div id = "arrow-right" class = "arrow"></div>
  </div>

//CSS
#showcase,#slider{
  height:100vh;
  width:100%;
}
.slide{
  width:100vw;
  height:100vh
}
.slide1{
  background:url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar3-1920.jpg) no-repeat center center/cover;
}

@media screen and (max-width: 900px) {
  .slide{
    height: 80vh;
  }
}
@media screen and (max-width: 700px) {
    .slide{
    height: 70vh;
  }
}
@media screen and (max-width: 600px) {
    .slide{
    height: 60vh;
  }
}
@media screen and (max-width: 500px) {
    .slide{
    height: 50vh;
  }
}
@media screen and (max-width: 400px) {
    .slide{
    height: 40vh;
  }
}
@media screen and (max-width: 300px) {
    .slide{
    height: 30vh;
  }
}

Имейте в виду, что это не впечатляющие примеры медиа-запросов, они просто используются для демонстрации механизма.

Добавьте приведенные ниже коды в класс «слайд»:

background-size: contain !important;

Это работает, спасибо, очень простое решение.

user11261905 01.05.2019 11:26

Эта техника хороша для тех, кто хочет, чтобы изображение было в центре.

user11261905 01.05.2019 11:30

Другие вопросы по теме