Как правильно это сверстать?

Question

[AntonSork]

Есть две колонки с картинками. Планируется, что при уменьшении области просмотра колонки с логотипами уйдут под форму и займут всю область просмотра по ширине, как лучше сверстать колонки с логотипами (желательно без vw) (с формой проблем нет)? Проблема в том, что верстка должна быть адаптивной, "ячейки" колонок с логотипами должны быть одинаковой высоты, сами картинки разной высоты (соответственно поля отпадают, а вариант сделать картинки одинаковой высоты мне кажется некошерным) и картинки должны быть вертикально центрированы, высота блока с логотипами неизвестна. Абсолютные единицы отпадают, так как при изменении области просмотра нарушатся пропорции логотипов.

Comments

[devstudent]

а в чем проблема-то . сделайте блоки одинаковой высоты , картинки по вертикали по центру пусть и будут. в чем сложность?

[AntonSork]

devstudent: не хотелось бы использовать абсолютные величины, так как могут нарушится пропорции картинок, можно конечно просчитать все варианты медиа-запросов, но это как-то не айс

[Максим]

AntonSork: это ещё адаптивно небось ?

[AntonSork]

Максим Жаров: Конечно

[Максим]

AntonSork: на халяву не буду мучатся

[AntonSork]

Максим Жаров: я не прошу готовую верстку, хотя бы принцип

[Максим]

AntonSork: два блока с лева и справа , float или inline-block не имеет значения , в левом input с display block но без указания ширины с margin 10px или на ваше усмотрение , position не нужен в этом случае

[devstudent]

AntonSork:а если в таблицу загнать? ячейка = картинка

[devstudent]

AntonSork: контейнер с картинкой - как ячейка таблицы, не меняя верстки , display:table-cell;

[AntonSork]

да, спасибо, пока взял display:table на вооружение

Answer 1

[Рустамка Воронцов]

Блочная верстка не?
12 блоков, 6 блоков на форму, 6 блоков на бренды, дальше в брендах так же по 6

Comments

[AntonSork]

это понятно, а как быть с высотой блоков с логотипами? Как она будет определяться?

[Рустамка Воронцов]

img {
    width: 100%;
    height: auto;
}

[Рустамка Воронцов]

AntonSork: ответил

[Рустамка Воронцов]

AntonSork: вообще если правильно, логотипы должны быть одинакового размера, а в остольном при блочной верстке я проблем не вижу.

[AntonSork]

ну этим мы задаем адаптивность картинки к размеру блока, но никак не влияем на сам блок, если высота блока с картинкой определяется только высотой его содержимого (картинки), то получится, что блоки с картинками будут разной высоты

[AntonSork]

Рустамка Воронцов: ну хотелось бы контенто-независимую верстку

[Рустамка Воронцов]

AntonSork: короч, я не понимаю чего вы хотите добиться вручную картинки забивать?? и чтоб они были независимого размера?? это бред, сервер отдаст нужный вам размер, вы похоже пытаетесь засунуть круглое в квадратное.

[Рустамка Воронцов]

AntonSork: ps я представлю если эти картинки будут форматом 4мп или более, страничка будет грузится год, зато независимо)

[AntonSork]

Рустамка Воронцов: а зачем логотипам 4мп?

[Рустамка Воронцов]

AntonSork: короч делайте что хотите...