动态地将图像并排/叠放

Question

我目前正在做一个项目，我有两张人体图像，正面和背面。图像设置在height: 80vh。我的问题是这样的：当屏幕很宽时，我一直在使用引导程序将图像彼此并排流动，当屏幕很高时，我一直在使用 col-xs-12 / col-md-6 类，但这些列的响应速度不如我想要，因为我真的希望图像彼此相邻，除非它们必须彼此重叠。我怎么能做到这一点？提前致谢！

---

当前 HTML：

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-xs-12 col-md-4" id="bodyMapFrontContainer">
        <img src="frontBodyImage.png" class="questionInputMethod" id="bodyImageFront" />
    </div>
    <div class="col-xs-12 col-md-4" id="bodyMapBackContainer">
        <img src="backBodyImage.png" class="questionInputMethod" id="bodyImageBack" />
    </div>
    <div class="col-md-2"></div>
</div>

---

CSS：

.questionInputMethod {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

#bodyImageFront, #bodyImageBack {
    display:block;
    max-height: 60vh; 
    max-width: 90%;
    height:auto;
    width: auto;
    margin-bottom: 10px;
    z-index:1;
    position:absolute;
}

Answer 1

WookieCoder 这与您在这里想要实现的目标类似吗？

看看这个 Fiddle 并调整它的大小。
这是用于在具有 60vh 高度的块中获取图像的 CSS。

.bg-image { 
    background: #fff url('http://images.clipartpanda.com/sad-girl-stick-figure-image.png')center no-repeat;
    -webkit-background-size: contain;
    -o-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}       
.block {
    min-height: 60vh;
} 

当您想将主 div 隔开/挡在中间时。尝试使用col-sm-offset-x 类。这样，当您在小屏幕上显示它时，您可以重新定位它。

这有帮助吗？

已更新以添加媒体断点

这是 Fiddle，在 400 像素处添加了断点。
您可以删除我添加的代码，以便在它使用 col-xxs-12 时显示。