动态地将图像放在彼此的顶部/上方

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;
} 

当你想要将主要部分空间/阻挡到中间时。尝试使用col-sm-offset-x课程。这样，当你在小屏幕上显示时，你可以重新定位它。

这有帮助吗？

针对添加的媒体断点进行了更新

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