Почему блоки при изменении ширины изменяют свою высоту по разному?

Question

[danforth]

Подскажите, есть такой код, это будут баннеры:

<style>
.main-banner {
    margin: 15px 0;
}
</style>
<section class="row">
    <div class="col-sm-6 col-xs-12">
        <a href="#">
            <img src="http://placehold.it/585x420" width="100%" height="100%" class="main-banner"/>
        </a>
    </div>
    <div class="col-sm-6 col-xs-12">
        <a href="#">
            <img src="http://placehold.it/585x195" width="100%" height="100%" class="main-banner"/>
        </a>
    </div>
    <div class="col-sm-6 col-xs-12">
        <a href="#">
            <img src="http://placehold.it/585x195" width="100%" height="100%" class="main-banner"/>
        </a>
    </div>
</section>

Вот как это все выглядит. Фото: prntscr.com/dsla6h

Живой пример: codepen.io/anon/pen/zNGjRN (спасибо @dpr)

При сужении окна, левый столбец (col-sm-6) становится меньше чем два других справа. Фото: prntscr.com/dslajw

С чем связанно данное поведение, и как сделать так, чтобы блоки были вровень?
Живой пример показать не могу, как так разработка ведется на локальной машине.

Спасибо отозвавшимся!

Comments

[Сергей delphinpro]

Живой пример показать не могу, как так разработка ведется на локальной машине.

Чувак, разработка всегда ведется на локальной машине, но другие почему-то могут показывать "живые" примеры.
codepen.io/anon/pen/zNGjRN

[Сергей Горячев]

Плюсую к ответу Сергей , всё можно.

[danforth]

Сергей: благодарю, сразу песочница в голову не пришла. Сейчас добавлю.

[Сергей Горячев]

danforth: От себя скажу, что было несколько раз такое: решаешь проблему на локалке, не решается. Забиваешь в песочницу, и решение приходит по мере копирования кода)))

[danforth]

Sergey Goryachev: да, бывает такое, что в стилях какая-то декларация все ломает, а в песочнице её нет. Тут, к моему счастью, проблема воспроизвелась и в песочнице так-же.

[Сергей delphinpro]

danforth: Поведение верстки вполне ожидаемое и корректное (правда вам нужно другое поведение)
Высота любого элемента, заданная в процентах работает только тогда, когда у его родителя тоже явно задана высота. В противном случае высчитывается по содержимому.
В данном случае при изменении размеров картинок они пропорционально сжимаются.
Вариант первый решения - заморочиться и подобрать правильные пропорции изображений, учитывая также и промежутки между ними.
Вариант второй - использовать флексы для расположения и object-fit для заполнения (самый простой, но не кроссбраузерный =)
Вариант третий - Зафиксировать высоту картинок
Вариант четвертый - добавить оберток, из которых сделать области по принципу адаптивного квадрата
Наверняка есть и больше вариантов для решения такой простой задачи.

[danforth]

Сергей: так в том то и дело, что нужно сохранение пропорций. я опытным путем высчитал (не силен в весртке), назначил отступы по 30px. Получается, что 585 х ( 195 * 2 + 30) = 585х420 пикселей. Точно такой-же размер, как и у левого баннера. Корень проблемы состоит в том, что между баннерами справа есть маргин, а он фиксированный а не в процентах?

[Сергей delphinpro]

danforth: Да тут не верстка, а математика =)
Рассчитал ты правильно, только не учел того, что размеры картинок меняются, а отступы - нет. Вот общая пропорция и ломается.

Answer 1

[Pervachok]

можна всё обернуть в еще один блок и задать ему
display: flex;
flex-direction: row;
align-items: center;

но те два маленьких блока тоже нужно обернуть в блок
такое корявое решение)

Comments

[danforth]

это не совсем то что мне нужно, нужно либо bootstrap, либо без флекс-боксов. Должно работать на древних браузерах.

[Alexander Belov]

danforth: Для древних браузеров можно только изуродовать заданной высотой блока + overflow: hidden

[Pervachok]

вот старая версия флекс-боксов, когдато пришлось юзать stackoverflow.com/questions/17447807/cross-browser...