Как адаптировать hexagon картинки в слайдере?

Question

[Immix]

Сверстал макет, начал писать медиа-запросы и не могу придумать как адаптировать картинки

bikes.esy.es/5

Answer 1

[Odinokun]

А как вы сверстали шестиугольники?

Comments

[Immix]

Я решил что в моем случае можно просто сделать картинки, без before и after. Но как теперь их адаптировать?

[Odinokun]

Immix: если это просто шестиугольные картинки, то задайте им width: 25% (либо другое нужное значение в процентах) и height: auto;

[Immix]

Дмитрий: после применения height: auto картинки пропадают, заданы через background. Та и вообще у меня там налеплены минусовые отступы и многое другое...

[Odinokun]

Immix: а зачем из бекграундом лепить?
задайте картинкам стили и работайте как с блоками
img {
display: inline-block;
width: 20%;
height: auto;
}

[Immix]

Дмитрий: и то правда, хорошая идея - работает. Только вот не найду почему бордеры не работают, добавлены теперь к img через before/after

.bg1:after,
.bg10:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 50px;
    height: 105px;
    border-left: 1px solid #e4e9eb;
}

.bg4:after,
.bg13:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 50px;
    height: 105px;
    border-right: 1px solid #e4e9eb;
}

[Immix]

думаю из-за height: auto