html - 动态地将图像放置在彼此旁边/之上

Question

我目前正在做一个元素，我有两张人体图像，正面和背面。图像设置为 height: 80vh。我的问题是:我一直在使用 bootstrap 在屏幕较宽时使图像并排流动，在屏幕高时使图像相互叠加，使用 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 并调整大小。
这是用于获取 block 中高度为 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 在 400px 处添加断点。
您可以删除我添加的代码，以便在它使用 col-xxs-12 时显示。