Как сделать чтобы блок при сужении сохранял пропорции?

Question

ma4t @ma4t

HTML
CSS

Как сделать чтобы блок при сужении сохранял пропорции?

Привет, задача сделать блоки чтобы при сужение они сохраняли свои пропорции и были квадратами.
Посоветовали использовать padding-bottom: 100%
Но как именно использовать это?

Как правильно писать высоты, этим элементам, например если у меня есть блок main с 400px на 560рх и в нем в колону два блока block, эти два блока как раз должны сужаться и сохранять свои размеры 250х250.
По идеи для резиновости надо задать блокам высоту в %, но при padding-bottom: 100% не пойму как задать height для block, они вылазят за границы main

Вопрос задан более трёх лет назад
435 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

5 комментариев

Михаил Власов @Whiled0S

padding-top или padding-bottom в этом примере значения не имеет

Написано более трёх лет назад

ma4t @ma4t Автор вопроса

<style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .main {
            max-width: 400px;
            width: 100%;
            max-height: 360px;
            margin: 0 auto;
        }

        .block, .block2 {
            display: flex;
            justify-content: start;
            align-items: flex-end;
            width: 100%;
            border: 2px solid red;
            box-sizing: border-box;
            padding-bottom: 100%;
        }

        .block {
            margin-bottom: 10px;
        }

        span {
            display: inline-block;
            width: 100%;
        }
        
    </style>
</head>
<body>
    <div class="main">
                <div class="block">
                   <!--<div><span>ПРИВЕТ</span></div>--> 
                </div>
                <div class="block2">
                    <!--<div><span>ПРИВЕТ</span></div>-->
                </div>
            
    </div>

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

Написано более трёх лет назад

Михаил Власов @Whiled0S

Не совсем понял в чем проблема, вставил в jsfiddle, вижу 2 блока с красным бордером по центру друг под другом внутри main, которые сохраняют квадратные пропорции. За main ничего не вылазит.

Написано более трёх лет назад
ma4t @ma4t Автор вопроса

Михаил Власов,

Написано более трёх лет назад
Михаил Власов @Whiled0S

ma4t,

Написано более трёх лет назад