Question

问题似乎来自ul.gallery，宽度为20000em。

即使其他div正在调整大小，图像也不会。

这是一个现场测试; （编辑：删除链接）

请帮忙吗？

#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

＆＃13;

#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 */
}

＆＃13;

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

1 个答案: