HTML / CSS使3个图像在线响应和精心设计

Question

我试图让这些图像很好地内联显示，并根据屏幕大小改变其位置/大小。这是我的HTML代码：

<div class="row tryRow white">
  <div class="col-xs-4 portfolio-item leftPic">
    <div class="imgWrap">
      <img class="img-responsive" src="~/img/FMA.png" />
      <p class="imgDescription">
       Some text in here </p>
    </div>
  </div>
  <div class="col-xs-4 portfolio-item centerPic">      
    <div class="imgWrap">
      <img class="img-responsive" src="~/img/SFK.png" />
      <p class="imgDescription">
          Some text in here
      </p>
      </div>
    </div>
  <div class="col-xs-4 portfolio-item rightPic">     
    <div class="imgWrap">
      <img class="img-responsive" src="~/img/CTG.png" />
      <p class="imgDescription">
      Some text in here </p>                        
    </div>  
  </div>
</div>

这些图像在悬停时显示在它们下面的一些文字。

这是其中一张图片的CSS：

.leftPic {
opacity:0.5;
border-radius:4px;
max-width: 33%;
width:auto;
}

正如您所看到的，我正在尝试将最大宽度设置为33％，因为每行有3个图像，但边距不正确，说实话，这有一个很大的问题。

问题：为了让它们缩小，请根据浏览器重新定位，同时保持相对清晰的外观。

Answer 1

我试过这个：

.tryRow{  display: inline-block;}

Answer 2

嗯......我会以不同的方式设置background-image，而不是使用html <img>。正如您期望的良好响应行为而且您的图像非常小，请看一下：

<div class="row">
    <div class="col-md-4">
        <div class="image image-1">Some text</div>
    </div>
    <div class="col-md-4">
        <div class="image image-2">Some text</div>
    </div>
    <div class="col-md-4">
        <div class="image image-3">Some text</div>
    </div>
</div>

.image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    // height: control it with media queries
}

.image-1 {
    background-image: url(path/to/image-1.jpg);
}

.image-2 {
    background-image: url(path/to/image-2.jpg);
}

.image-3 {
    background-image: url(path/to/image-3.jpg);
}

这种方法还可以让您更灵活地设置这些框内容。