Question

我试图在每个col-xs-6盒子里放置平台鞋的4个图像，但它们似乎不合适。

在我添加<h4>之前，col-xs-6与页面的一侧重叠，使整个页面关闭。

关于我如何解决这个问题的任何想法。我希望<h4>也可以在方框上面。

<div id="meettheband">
<h4> MEET THE BAND </h4>
  <div class="row">
    <div class="col-xs-6 nobby">
      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive">

    </div>

    <div class="col-xs-6 dave">

      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive">

    </div>

  </div>

    <div class="row">
    <div class="col-xs-6 jammy">

      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive">

    </div>

    <div class="col-xs-6 dozy">

      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive">

      </div>

  </div>

</div>

#meettheband {

   width: 100%;
   height: auto;
   background-color: black;
   display: flex;
}

.col-xs-6 {
  width: 50%;
}

.nobby {
  border: solid red 1px;

}

.dave {
    border: solid red 1px;

}

.jammy {
    border: solid red 1px;

}

.dozy {
    border: solid red 1px;

}

Answer 1

您的图像具有指定显式宽度的内联属性 - 宽度大于列宽。因此，为最终在这些列中的任何图像设置最大宽度将绕过这个过度：

.col-xs-6 img {
    max-width: 100%;
}

＆＃13;

#meettheband {

   width: 100%;
   height: auto;
   background-color: black;
   display: flex;
}

.col-xs-6 {
  width: 50%;
}

.nobby {
  border: solid red 1px;

}

.dave {
    border: solid red 1px;

}

.jammy {
    border: solid red 1px;

}

.dozy {
    border: solid red 1px;

}

.col-xs-6 img {
    max-width: 100%;
}

＆＃13;

<div id="meettheband">
<h4> MEET THE BAND </h4>
  <div class="row">
    <div class="col-xs-6 nobby">
      <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive">

    </div>

    <div class="col-xs-6 dave">

      <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive">

    </div>

  </div>

    <div class="row">
    <div class="col-xs-6 jammy">

      <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive">

    </div>

    <div class="col-xs-6 dozy">

      <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive">

      </div>

  </div>

</div>

＆＃13;

如果您希望保持相对比例，只需将height: auto添加到相关的样式规则中。

Answer 2

您必须将图片的width或height设置为占据容器的100％，例如：

.nobby img {
  width: 100%; /* or height:100% */
}

如果您需要保持内联尺寸，即400px，当容器大于该值时：

.nobby img {
  max-width: 100%; /* or max-height:100% */
}

如果可能，这将覆盖您在img元素上设置的内联宽度和高度，否则将占用容器的完整大小。

保持您设置的尺寸但防止图像过度拟合的另一种解决方案是：

.nobby {
  overflow: hidden;
}

在col-xs-6内部安装图像

2 个答案: