Динамическое размещение изображений рядом друг с другом

Question

Я сейчас работаю над проектом, где у меня есть два изображения человеческого тела спереди и сзади. Изображения установлены на height: 80vh. Моя проблема такова: я использую бутстрап для потоковой передачи изображений рядом друг с другом, когда экран широкий, а поверх друг друга, когда экран высок, с классами col-xs-12/col-md-6, но эти столбцы не так отзывчивы, d like, поскольку я действительно хочу, чтобы изображения были рядом друг с другом, если они не должны течь друг на друга. Как я могу это сделать? Заранее спасибо!

---

Текущий 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 и измените его размер.
Вот CSS, чтобы получить изображение в блоке с высотой 60vh.

.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.