Question

我试图弄清楚为什么在缩略图图像的右侧添加了额外的空间。我在该区域周围放置了一个红色边框，以便更容易看到额外的空白区域。我该如何删除它？

任何建议都将不胜感激。

＆＃13;

jQuery(document).ready(function() {
  $('.thumb').click(function() {
    $('.main-image img').attr('src', $(this).children('img').attr('src'));
  });
});

＆＃13;

.pics {
  overflow: hidden;
  width: 60%;
  box-sizing: border-box;
  padding-left: 6em;
  display:flex;
  justify-content:center;
}

.main-image {
  width: 100%;
  
}
.main-image img {
  width: 100%
}
.thumb {
  position:relative;
  width:30%;
  height:auto;
  margin:1em;
  border: 1px solid blue;

}
.selection-image {
display:flex;
flex-direction:column;
border:1px solid red;
}
.selection-image img {
  width:100%;
  height: auto;
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
  <div class="main-image">
    <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
  </div>
  <div class="selection-image">
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1511644547841-f467df8071a4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=151cc232aa6e73bab1aa03d23b276046">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1477868433719-7c5f2731b310?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=5d54dfa7ff8cdf7d4214d468d7c7443b">
    </div>

  </div>
</div>

＆＃13;

Answer 1

可能只是简单地将width:30%移到容器中。还要使图像块避免它们下面的空白：

＆＃13;

jQuery(document).ready(function() {
  $('.thumb').click(function() {
    $('.main-image img').attr('src', $(this).children('img').attr('src'));
  });
});

＆＃13;

.pics {
  overflow: hidden;
  width: 60%;
  box-sizing: border-box;
  padding-left: 6em;
  display: flex;
  justify-content: center;
}

.main-image {
  width: 100%;
}

.main-image img {
  width: 100%;
}

.thumb {
  position: relative;
  height: auto;
  margin: 1em;
  border: 1px solid blue;
}

.thumb img {
  display: block;
}

.selection-image {
  display: flex;
  width: 30%;
  flex-direction: column;
  border: 1px solid red;
}

.selection-image img {
  width: 100%;
  height: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
  <div class="main-image">
    <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
  </div>
  <div class="selection-image">
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1511644547841-f467df8071a4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=151cc232aa6e73bab1aa03d23b276046">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1477868433719-7c5f2731b310?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=5d54dfa7ff8cdf7d4214d468d7c7443b">
    </div>

  </div>
</div>

＆＃13;

Answer 2

您将拇指等级的图片宽度设置为30％，而不是图像居中。将拇指类的宽度设置为自动，如果不需要空格，则可以删除边距/填充。

.thumb {
  position:relative;
  width:auto;
  height:auto;
  margin:1em;
  border: 1px solid blue;
}

摆脱图片库中的额外空间

2 个答案: