html - 在大屏幕上对齐同一行/行/div 上的图像

Question

对于小于 768 像素的屏幕，有一组 3 张图片彼此对齐(display:block)。现在对于更大尺寸的屏幕，图像应该显示在行内 block 中，文本位于它们下方(居中)，并且它们应该在浏览器窗口调整大小时在同一水平面上响应地调整自己的大小。 现在，这是我尝试过的结果:

试验 1:

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”后，图像可以很好地调整大小，但中间的图像会向上 float ，即使使用了 vertical-align: bottom。我是否包含“”media-object pull-left”并不重要。我得到以下结果:

自从过去 24 小时以来，我已经尝试了这些的各种版本(这就是为什么每个图像 div 都有单独的类)，阅读了大量 SO 帖子，添加了 float ，清除了 float ，使用了相对和绝对定位，底部:0(将我的图像放在同一条线上，但图像没有以响应方式运行)。另外，我不明白为什么容器和 content-div 之间会有额外的空间。我确实明确地设置了margin和padding为0。中间的图像上升了，下降了，但它拒绝排队。图像溢出了 div，并且缩小了太多。我什至尝试调整图像的大小以使其具有相同的高度，(但为什么我应该在响应式设计中这样做？)。

为了我的生活，请帮我解决这个问题。

Answer 1

只需使用这样的结构:

<div class="row">
    <div class="col-xs-12 col-sm-4">
        img, text...
    </div>
    <div class="col-xs-12 col-sm-4">
        img, text...
    </div>
    <div class="col-xs-12 col-sm-4">
        img, text...
    </div>
</div>

col-xs-12 用于在 <768px 屏幕上显示 100% 宽度的元素。 col-sm-4 在屏幕上的 33% 宽度 >768px。 阅读此内容以更好地理解:Bootstrap grid system

为图片容器设置相同的height属性，overflow: hidden, text-align: center;并在 img 元素上设置 100% 高度。因此，您将获得相同高度并在两侧裁剪的图像。