如何控制缩略图的div容器宽度？解决图片间多余空隙问题

我来帮你搞定这个缩略图容器宽度不匹配的问题！核心问题在于你当前的.column设置了固定宽度限制，而且flex布局和float混用导致容器没法自适应图片的实际尺寸。下面是具体的修改方案：

关键修改点 #

• 移除.column的float: left和max-width: 10%，让容器能根据内部图片的尺寸自动调整宽度
• 给缩略图图片统一设置max-width: 100%; height: auto;，确保图片保持原有比例，同时让容器自适应图片大小
• 调整.row的flex属性，优化缩略图的对齐和间距（可选，可根据需求调整）

修改后的完整代码 #

<!DOCTYPE html>
<html>
<style>
body {
  font-family: Arial;
  margin: 0;
}
* {
  box-sizing: border-box;
}
img {
  vertical-align: middle;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}
/* Hide the images by default */
.mySlides {
  display: none;
  margin: auto;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* Container for image text */
.caption-container {
  text-align: center;
  background-color: white;
  padding: 35px;
  color: black;
  font-size: 1.1em;
}
.row {
  display: flex;
  justify-content: center;
  gap: 8px; /* 可选：添加图片间的小间距，避免挤在一起 */
  align-items: center; /* 让不同高度的图片垂直居中对齐 */
}
/* 调整column样式，去掉固定宽度和float */
.column {
  /* 移除float和max-width，让容器自适应内容 */
}
/* 统一缩略图样式，确保容器自适应图片 */
.demo {
  opacity: 0.6;
  max-width: 100%;
  height: auto;
}
.active,
.demo:hover {
  opacity: 1;
}
</style>
<body>
<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 4</div>
    <img src="img_144-109.JPG" style="height:80%" class="center">
  </div>
  <div class="mySlides">
    <div class="numbertext">2 / 4</div>
    <img src="img_144-133.jpg" style="width:20%" class="center">
  </div>
  <div class="mySlides">
    <div class="numbertext">3 / 4</div>
    <img src="img_free_admission.JPG" style="width:20%" class="center">
  </div>
  <div class="mySlides">
    <div class="numbertext">4 / 4</div>
    <img src="img_154-043.jpg" style="height:80%" class="center">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
  <div class="caption-container">
    <p id="caption"></p>
  </div>
  <div class="row">
    <div class="column">
      <img class="demo cursor" src="https://www.bartonlewisfilm.com/img_144-109.JPG" onclick="currentSlide(1)" alt="144-109, Dyckman St., IND Eighth Ave. Line">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.bartonlewisfilm.com/img_144-133.jpg" onclick="currentSlide(2)" alt="144-133, Dyckman St., IND Eighth Ave. Line">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.bartonlewisfilm.com/img_free_admission.JPG" onclick="currentSlide(3)" alt="free admission, Greenpoint Ave., IND Crosstown Line">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.bartonlewisfilm.com/img_154-043.jpg" onclick="currentSlide(4)" alt="154-043, 116th St., IND Eighth Ave. Line">
    </div>
  </div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>

修改说明 #

• 去掉了.column的固定宽度和float属性，让每个容器能完全贴合内部图片的实际尺寸
• 给.demo类添加了max-width: 100%; height: auto;，确保图片按原比例显示，同时驱动容器自适应大小
• 在.row中增加了gap和align-items属性，优化了缩略图的间距和垂直对齐效果，让整体视觉更协调

这样修改后，竖版图片的容器就会精准匹配图片宽度，不会再出现多余空隙啦！

内容的提问来源于stack exchange，提问作者Barton Lewis