带有列表项的图像幻灯片的媒体查询

Question

我有一个使用标签创建的背景幻灯片。

<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;
}

我正在尝试获取整个幻灯片，其中包括在移动浏览器中打开时保留过渡功能的图像，但是可以根据需要调整大小。

任何帮助将不胜感激。