Как сделать этот блок адаптивным?

Question

[Дмитрий]

Как сделать подобный блок адаптивным?



Сверстать проблем нету. И через flexbox, и через float, и через position: absolute. А вот как адекватно адаптировать, что бы ничего не выпирало и все такое.

UPD: Видимо я не правильно объяснился, или черт его знает. Адаптивность не горизонтальная, а вертикальная. И решение я уже сам написал, так что вопрос ЗАКРЫТ :)

Также я хочу фильтровать это с помощью mixItUp.

Answer 1

[Дмитрий]

В общем решил тем, что контейнеру задал высоту в 50vw (т.е. высота контейнера адаптируется под ширину экрана), а блоки с процентной высотой.

Answer 2

[Андрей Верх]

Если сверстать нет проблем то какие проблемы с адаптивностью? Или размеры меняем постепенно или кол-во колонок.

Comments

[Дмитрий]

Проблема в том, что здесь высоту блоков в процентах указать не получается (видимо это моя проблема), только в пикселях. Потому во время адаптации в определенные моменты блоки будут местами выпирать. Я хочу сделать адаптивность именно пропорциональную, а не просто ширина 25% и уменьшение высоты каждые 200-300 пикселей ширины экрана. Может подскажите как?

[xtala zen]

Дмитрий: Я вижу у вас 4ре блока-колонки в которых изображения идут друг за другом. Я бы это решил просто уменьшением количества блока колонок при уменьшении экрана т.е. чем меньше экран тем меньше колонок-блоков по горизонтали. Типа 4-3-2-1.

[Дмитрий]

xtala zen: я это понимаю. Я о самом ресайзе. У меня монитор 1300px. Всё норм. Я начинаю ресайзить, и у меня блоки съезжают, потому что у них фиксированный размер, и нормально выглядеть они станут на ширине 1200, так как я это пропишу в медиа запросах. Но сам момент от 1300 до 1200 блоки будут выпирать, т.к. размеры не в процентах, а в фиксированных значениях. Мне нужна ПРОПОРЦИОНАЛЬНАЯ адаптивность)

[Андрей Верх]

Дмитрий: Зависит от того как у вас это сделано. Вы сказали что всё просто сверстать, но как по мне, тут как раз проблема сверстать, а не адаптивность добавить. Обычно для такой раскладок используют плагины вроде masonry, т.к. в CSS нет простых способов такую раскладку сделать.

Можно попробовать так .cont {columns: 25% 4} но может криво работать.

[xtala zen]

Дмитрий: а, понял. Ну тогда делать изображения очень большими, а по размеру блока они будут подгоняться с помощью max-width:100%; . По крайне мере такой способ был описан в книге Маркота И. "Отзывчивый веб-дизайн". Производительность конечно упадет.

[Дмитрий]

Андрей Верх: я сверстал через

display: flex;
flex-wrap: wrap;
flex-direction: column;

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

[Дмитрий]

xtala zen: как-то не работает) Может я что-то не так понял. Сделал исходный размер картинки 700x800 (в два раза больше необходимого).
Код написал вот такой:

.portfolio-elem{
    width: 25%;
        img{
            display: block;
            max-width: 100%;
            height: auto;
        }
}

Так ведь?

[xtala zen]

Дмитрий: я к сожалению эту книгу читал года два назад точно не скажу, но помню, что Итан делал адаптивные изображения именно через эту фишку.Так же он в примерах делал полностью резиновый сайт через проценты которые он высчитывал через соотношение сторон блоков. Могу скинуть книгу на файлообменник и отправить ссылку на почту, если интересно, здесь за варез наказать наверное могут.

[Дмитрий]

xtala zen: да ну книгу я и сам скачаю, благо интернетом пользоваться умею) Спасибо за источник

[Андрей Верх]

Дмитрий: Высоту нельзя задавать, т.к. картинки должны по ширине тянуться. Можно задать картинки через background и задать background-size:cover

[Дмитрий]

Андрей Верх: ну мне только адаптивная высота нужна. С шириной я справляюсь без проблем.

Answer 3

[sergey]

Ну так задайте свойство картинкам вашим для начала

img{width:100%; max-width: реальный размер этого изображения; height: auto;}

, ну и при адаптивности на определенном размере экрана меняйте эти значения, при совсем мелком расширении перестраивайте блоки. Короче ничего сложного тут нет.

Comments

[Дмитрий]

А чем мне поможет этот код? В вашем примере подразумевается, что картинки точно соответствуют нужным размерам. Если я поставлю height: auto, то картинка не будет выше своего исходного размера.

Answer 4

[iBird Rose]

задавайте картинки бэкграундом блокам. можно через style="" напрямую. и будет у вас все красиво адаптироваться

Comments

[Дмитрий]

У меня не будет красиво адаптироваться высота этих блоков, т.к. в % я её никак задать не могу. С шириной проблем нет.

[iBird Rose]

Дмитрий: ну высоту уже вручную через media задавай на разных экранах

[Дмитрий]

iBird Rose: Как я уже описал выше: "Я о самом ресайзе. У меня монитор 1300px. Всё норм. Я начинаю ресайзить, и у меня блоки съезжают, потому что у них фиксированный размер, и нормально выглядеть они станут на ширине 1200, так как я это пропишу в медиа запросах. Но сам момент от 1300 до 1200 блоки будут выпирать, т.к. размеры не в процентах, а в фиксированных значениях. Мне нужна ПРОПОРЦИОНАЛЬНАЯ адаптивность)". Да и я так то сделал уже, но все равно теперь проблемы с сортировкой.

[iBird Rose]

Дмитрий: ну тк ставь бутстрап и делй их через col-sm-3 к примеру. и убери паддинги справа и слева у блоков бутсрапа

[Дмитрий]

iBird Rose: да толку от бутстрапа, если у меня своя сетка. Я о высоте блоков, а не ширине. Адаптивная ВЫСОТА. Т.е. на ширине экрана 1200px высота контейнера 700px, а на ширине в 1150, высота 691px. (это не конкретные цифры, я объясняю суть). И это я решил заданием высоты контейнера в 50vw. Вот только с сортировкой с помощью mixItUp я пока не решил проблему. Но это другое.

Answer 5

[Андрей Канаев]

Есть решение проще спомошью column-count.

.image-grid {
    column-count: 4;
    column-gap: 0;
}

.image-item {
   display: inline-block;
}

.image-item img{
  width: 100%;
}

@media screen and (max-width: 480px) {
    .image-grid {
        column-count: 1 !important;
    }
}

@media screen and (max-width: 960px) {
    .image-grid {
        column-count: 2;
    }
}

Comments

[Дмитрий]

Я видимо изначально неправильно выразился. Смотрите вопрос (обновил). Но спасибо за усилие

[xtala zen]

!important использовать страшный моветон. Потом может возникнуть путаница при доработке.

[Дмитрий]

xtala zen: +