Как создать пропорциональные блоки во flex?

Question

img {
    --ratio: 600 / 600;
    --container-width: 300px;

    height: calc(100vw * var(--ratio));
    max-height: calc(var(--container-width) * var(--ratio));
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
}

Нашел вот такое решение и оно рабочее, но когда оно находится в родительском флексе и у этого родителя тоже родитель флекс, оно не работает.

.obertka{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
img {
    --ratio: 600 / 600;
    --container-width: 300px;

    height: calc(100vw * var(--ratio));
    max-height: calc(var(--container-width) * var(--ratio));
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
}
.blok {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

<div class="obertka">
    <img src="https://cdn.shopify.com/s/files/1/0261/3873/8766/products/tina-guina-s8_7AqkzCWY-unsplash__05436.1570715911.1280.1280_afc1bb7b-e823-4dab-8e13-4712ce503d7a_930x.jpg?v=1597152699"
        alt="">
    <br><br>
    <img src="https://cdn.shopify.com/s/files/1/0261/3873/8766/products/tina-guina-s8_7AqkzCWY-unsplash__05436.1570715911.1280.1280_afc1bb7b-e823-4dab-8e13-4712ce503d7a_930x.jpg?v=1597152699"
        alt="">
</div>
<br><br>
<div class="obertka">
    <div class="blok"> 
        <img src="https://cdn.shopify.com/s/files/1/0261/3873/8766/products/tina-guina-s8_7AqkzCWY-unsplash__05436.1570715911.1280.1280_afc1bb7b-e823-4dab-8e13-4712ce503d7a_930x.jpg?v=1597152699"
        alt="">
    </div>
    <br><br>
    <div class="blok"> 
        <img src="https://cdn.shopify.com/s/files/1/0261/3873/8766/products/tina-guina-s8_7AqkzCWY-unsplash__05436.1570715911.1280.1280_afc1bb7b-e823-4dab-8e13-4712ce503d7a_930x.jpg?v=1597152699"
        alt="">
    </div>
</div>

БЛОГ НА HUSL

Как создать пропорциональные блоки во flex?

Ответы (0 шт):