【发布时间】：2016-12-27 15:28:32
【问题描述】：
对于小于 768 像素的屏幕，有一组 3 张图像在彼此下方对齐（显示：块）。现在对于更大尺寸的屏幕，图像应该显示在其下方（居中）文本的内联块中，并且随着浏览器窗口调整大小，它们应该在相同的水平水平上响应地调整自己的大小。 现在，我尝试了以下结果：
试验一：
HTML：
<div class="row container-fluid rowimg" id="row4">
<div class="conatiner-fluid col-sm-12 images">
<div class="conatiner-fluid col-sm-4 smcar">
<figure class="carimg">
<img src="images/Small Car.jpg" class="media-object pull-left" alt="Small Car">
<figcaption>Car 1</figcaption>
</figure>
</div>
<div class="conatiner-fluid col-sm-4 fmlcar">
<figure class="carimg">
<img src="images/Family Car.jpg" class="media-object pull-left" alt="Family Car">
<figcaption>Car 2</figcaption>
</figure>
</div>
<div class="conatiner-fluid col-sm-4 medcar">
<figure class=" carimg">
<img src="images/Medium Car.jpg" class="media-object pull-left" alt="Medium Car">
<figcaption>Car 3</figcaption>
</figure>
</div>
</div>
CSS：
@media (min-width: 768px) {
#row4{
border: 1px dotted red;
margin:0;
padding:0;
text-align:center;
}
figure {
display: inline-block;
border: 1px dotted gray;
padding:0;
margin:0;
vertical-align: bottom;
}
figure img {
vertical-align: bottom;
display:inline-block;
}
figure figcaption {
border: 1px dotted green;
text-align: center;
display:inline-block;
vertical-align: bottom;
}
}
结果是 div 相互重叠：
试验 2：
在图像的类中添加“img-responsive”后，图像会很好地调整大小，但中间图像会向上浮动，即使使用垂直对齐：底部也是如此。我是否包含“”媒体对象拉左“并不重要。我得到以下结果：
现在我在过去 24 小时内尝试了这些的各种版本（这就是为什么每个图像 div 都有单独的类），阅读大量 SO 帖子，添加浮动，清除浮动，使用相对和绝对定位，底部：0（将我的图像放在同一行，但图像没有以响应方式表现）。另外，我不明白为什么容器和内容 div 之间有额外的空格。我确实将边距和填充设置为 0。中间的图像上升了，下降了，但它拒绝排队。图像已经溢出了 div，并且它们已经缩小了太多。我什至尝试过调整图像的大小以使其具有相同的高度，（但我为什么要在响应式设计中这样做呢？）。
为了我的一生，请帮我解决这个问题。
【问题讨论】：
标签： html css twitter-bootstrap responsive-design image-size