0

На странице есть блок:

.steps_item {
    display: inline-block;
    vertical-align: top;
    width: (100%/3); 
    box-sizing: border-box;
    position: relative;
    padding-top: 292px;
    transition: width .3s linear;
    @include adaptive(900px, 900px) {
        width: (100%/2);
    }
    @include adaptive(mobile) {
        width: (100%);
    }
}  

В нем абсолютно позиционированный псевдо-элемент:

.steps_item::before {
    content: '';
    position: absolute;
    width: 81.21%;
    height: 0; // эта и следующая строчка используются для зависимости 
    padding-bottom: 88.4848%; // высоты от ширины
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}   

Сейчас при ресайзе окна браузера псевдоэлемент ведет себя так, как нужно, его размеры пропорционально изменяются в зависимости от ширины его родителя.
Но есть одна проблема: в данном коде padding-top у родителя задан жестко в пикселях, необходим он для того, что бы сдвинуть остальной контент ниже псевдо-элемента + отступ от него.
Так вот, как сделать этот самый padding зависящий от динамической высоты псевдо-элемента?

1 ответ 1

1

Динамическая высота псевдоэлемента зависит от его ширины, а та, в свою очередь, от ширины элемента, которая зависит от ширины экрана.

При выбранном разрешении экрана, когда 292px смотрятся наилучшим образом, вычислите, сколько % от ширины экрана составляют 292px (предположим, 20%) и замените

padding-top: 20vw;
2
  • обернул блок в еще один див, он уже считает ширину от экрана, а сам item и все что в нем уже от него.... не самый лучший подход, но пойдет.... попробую и Ваш совет, но позже... Спасибо.
    – pepel_xD
    26 фев 2017 в 7:51
  • Я потому сразу и советовал в vw. Уверен был, что основной блок еще многократно во что-то обернут. 26 фев 2017 в 8:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.