Отзывчивое выравнивание изображения изображения

Question

Я начинающий программист html/CSS, который должен удовлетворять определенному набору обстоятельств. У меня есть 2 изображения, оба должны быть выровнены по вертикали по центру изображения. Одно изображение должно быть выровнено влево, а другое должно быть выровнено по правому краю. Они будут в максимальной ширине div, но я не думаю, что это должно быть проблемой. Поскольку веб-страница сжимается ниже ширины двух изображений вместе, изображения затем должны быть горизонтально центрированы одним изображением поверх другого. Я добавил фотографии к кларфию (извините, я бы добавил, как фотографии, но у меня есть нуль rep). Контейнер div и изображения будут переменными, поэтому постановка на основе пикселов не может быть и речи.

Итак, я исследовал эту тонну, но все ответы, которые я нашел, были частичными; не в состоянии сделать все, что я ищу. Есть идеи?

(http://imageshack.us/a/img819/9515/3zt.gif)

(http://imageshack.us/a/img14/853/qp8.gif)

Исследование:
Я заметил, что мой вопрос был -1'd. Наверное, не предоставление моего исследования было ошибкой? Вот некоторые из методов, я попытался решить эту проблему: Vertical alignment of elements in a div

How to vertically align an image inside div

How to vertically middle-align floating elements of unknown heights?

Wrap long HTML tables to next line

Answer 1

Edit # 2

Другая версия, я думаю, что это чистое Я могу думать о
live view
edit view
Используйте таблицу css и вертикальную выровненность: среднюю для широкого экрана, затем сверните стол для узких видовых экранов. Код чист, и он полностью независим от высоты изображения.

================

Редактировать

Как @ user2748350 правильно указал, мое первоначальное предложение ниже не выравнивать изображения по вертикали на если они были разных высот.

Вот вариант, который является улучшением с использованием вертикального выравнивания: среднего и встроенного изображений.Единственное требование состоит в том, что вы установили высоту строки больше, чем самое высокое изображение:
live view
edit view

======================== =======================
Оригинал

Смотрите, если это поможет вам:
live view
edit view

HTML

<div class="container"> 
<img src="http://placehold.it/300x150" class="left"> 
<img src="http://placehold.it/250x150" class="right"> 
</div> 

CSS

.container{ 
margin: 0 auto; 
max-width:1000px; 
} 
img.left{ 
display:block; 
float:left; 
} 
img.right{ 
display:block; 
float:right; 
} 

@media (max-width: 570px) { 
img.left{ 
float:none; 
margin: 0 auto; 
} 
img.right{ 
display:block; 
float:none; 
margin: 0 auto; 
} 
} 

В голове вашей страницы, вы также хотите добавить

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

для хорошего отображения на мобильных устройствах.

Надеюсь, это поможет!