2

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

即使其他 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="#">‹&lt;/a>
    <a class="jcarousel-control-next" href="#">›&lt;/a>
    <div class="jcarousel-pagination"></div>
  </div>
</section>

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

4

1 回答 1

0

对于严格的 CSS 解决方案，您可以将列表项的最大宽度设置为 800 像素，宽度设置为 100vw（视口宽度的百分比）。视口单元浏览器支持

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

于 2015-06-05T15:11:27.060 回答