使用flexbox在bootstrap列中拟合图像

Question

我目前正在制作一个4列宽的网格系统。我想在每一列中都有一个独特的图片，但我有一个问题，它不适合，当我尝试max-width：100％时，图片缩小并变得非常小。

这是我的HTML代码：

 <div class="row">
    <div class="col-sm-3">
        <img src="Bilder/test.jpg" class="img-responsive">
    </div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3"></div>
</div>

CSS代码：

 /* parent */ .row { 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 15%;
    padding-right: 15%; }

/* child */ 

.col-sm-3 {  
    width: 300px;
    height: 300px;
    padding: 7em;
    margin: 1%; /* important, margin between columns */ 


    color: #FFF;
    background-color: hsla(195, 60%, 50%, 1); }

@media screen and (min-width: 500px) {
    .row {
        display: flex;
        flex-direction: row;
        padding-left: 15%;
        padding-right: 15%;  }

我添加bootstrap类＆＃34; img-responsive＆＃34;

后列的示例

https://imgur.com/a/0WNiv

Answer 1

问题是您已应用的填充。

.col-sm-3 {  
    width: 300px;
    height: 300px;
    padding: 7em;
   }

7em在图像的两侧都是112像素，在76px（300-224）上留下以适合图像。

删除填充，问题解决了。

  /* CSS for "idretter" */


/* parent */

.row {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 15%;
  padding-right: 15%;
}


/* child */

.col-sm-3 {
  width: 300px;
  height: 300px;
  margin: 1%;
  /* important, margin between columns */
  color: #FFF;
  background-color: hsla(195, 60%, 50%, 1);
}

@media screen and (min-width: 500px) {
  .row {
    display: flex;
    flex-direction: row;
    padding-left: 15%;
    padding-right: 15%;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="nav">
  <nav class="navbar navbar-inverse">
    ...
  </nav>
</div>

<div class="row">
  <div class="col-sm-3">
    <img src="http://www.placebacon.net/400/300" class="img-responsive">
  </div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>

</div>
<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>

</div>
<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
</div>