Медиа-запросы для изображений Слайд-шоу с элементами списка - PullRequest
Новая
       8

Медиа-запросы для изображений Слайд-шоу с элементами списка

0 голосов
/ 27 декабря 2018

У меня есть фоновое слайд-шоу, созданное с тегом. 

<ul class="slideshow">
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  <li>
    <span>3</span>
  </li>
  <li>
    <span>4</span>
  </li>
  <li>
    <span>5</span>
  </li>
  <li>
    <span>6</span>
  </li>
  <li>
    <span>7</span>
  </li>
</ul>

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

Вот мой CSS для слайд-шоу. 

.slideshow {
  list-style: none;
  z-index: -1;
}

.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: -5;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s;
}

.slideshow li:nth-child(1) span {
  background-image: url(1.jpg);
  z-index: -1;
}

.slideshow li:nth-child(2) span {
  background-image: url(2.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
  z-index: -1;
}

.slideshow li:nth-child(3) span {
  background-image: url(3.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
  z-index: -1;
}

.slideshow li:nth-child(4) span {
  background-image: url(4.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
  z-index: -1;
}

.slideshow li:nth-child(5) span {
  background-image: url(5.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
  z-index: -1;
}

.slideshow li:nth-child(6) span {
  background-image: url(6.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
  z-index: -1;
}

.slideshow li:nth-child(7) span {
  background-image: url(7.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
  z-index: -1;
}

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

Любая помощь будет оценена.

...