为什么滑块图像没有响应？

Question

问题似乎出在宽度为 20000em 的 ul.gallery 上。

即使其余的 div 正在调整大小，图像也没有。

这里是现场测试；（编辑：删除 link）

有什么帮助吗？

#container div.school {
  background: white;
  color: #333333;
  float: left;
  position: relative;
  overflow: hidden;
  max-width: 800px;
}

#container div.school ul.gallery {
  float: left;
  width: 20000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

#container div.school ul.gallery li {
  float: left;
  width: 800px;
}

#container div.school ul.gallery li .image {
  max-width: 600px;
  margin: 0 auto;
}

#container div.school ul.gallery li .image img {
  width: 100%;
  height: auto;
}

<section id="schools">
  <div class="school" id="sass">
    <ul class="gallery">
      <li>
        <div class="image">
          <a class="swipebox" title="School of Arts and Social Sciences 1" href="http://s1.city.ac.uk/developer-assessment-2015/i/sass/01_2048x1396.jpg"><img class="thumbnail" src="http://s1.city.ac.uk/developer-assessment-2015/i/sass/01_tn.jpg" alt="School of Arts and Social Sciences 1" title="School of Arts and Social Sciences 1" width="600" height="409"></a>
          <div class="caption">School of Arts and Social Sciences 1</div>
        </div>
      </li>
    </ul>
    <a class="jcarousel-control-prev" href="#">‹</a>
    <a class="jcarousel-control-next" href="#">›</a>
    <div class="jcarousel-pagination"></div>
  </div>
</section>

编辑：在媒体查询中将视口宽度设置为 100% 后，图像现在会调整大小。

Answer 1

对于严格 CSS 的解决方案，您可以将列表项的最大宽度设置为 800px，将宽度设置为 100vw（占视口宽度的百分比）。 Viewport unit browser support

#container div.school ul.gallery li {
    max-width: 800px;
    width: 100vw; /* sets width to 100% of viewport width */
}

#container div.school ul.gallery li .image {
    padding: 0 10%; /* add if you want padding on images */
}

为什么滑块图像没有响应？

Why the slider image is not responsive?

css

slider

responsiveness