Question

对于小于768像素的屏幕，有一组3张图像彼此对齐（显示：块）。现在对于更大尺寸的屏幕，图像应该显示为内嵌块，其下方是文本（居中），并且应该在浏览器窗口调整大小时在相同的水平层上响应地调整自身大小。现在，这是我尝试过以下结果：

试验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彼此重叠： div's overlapping each other

试验2：

在图像类中添加“img-responsive”后，图像会很好地调整大小，但中间图像会浮动，即使是vertical-align：bottom也是如此。无论我是否包括“媒体 - 对象左拉”都没关系。我得到以下结果： middle image floating up

现在我已经尝试了过去24小时以来的各种版本（这就是为什么每个图像div的单独类），阅读大量SO帖子，添加浮动，清除浮动，使用相对和绝对定位，底部：0（将我的图像放在同一行，但图像不是以响应的方式表现）。另外，我不明白为什么容器和content-div之间有额外的空格。我确实将边距和填充设置为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用于屏幕上100％宽度的显示元素＆lt; 768px。 col-sm-4屏幕宽度为33％＆gt; 768px。阅读本文以便更好地理解：Bootstrap grid system

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

在更大的屏幕

1 个答案: