-xs-6中的图像拟合

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%;
}

​

#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%;
}

<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>

​

如果希望保持比例相对，只需将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;
}