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

Question

[Сергей Ракипов]

Нашел вот такое решение, и оно рабочее.

img {
  --ratio: 664 / 1000;
  --container-width: 30em;
  display: block;
  height: calc(100vw * var(--ratio));
  max-height: calc(var(--container-width) * var(--ratio));
  width: 100%;
  max-width: var(--container-width);
}

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

.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 {
    --ratio: 600 / 600;
    --container-width: 300px;

    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vw * var(--ratio));
    max-height: calc(var(--container-width) * var(--ratio));
    width: 100%;
    max-width: var(--container-width);

    border: 1px solid #000; 
    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="">
    <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>
    <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>

Comments

[Антон Литвиненко]

Чисто из любопытства.
Во втором куске кода изображению задан дисплей флекс, выравнивания для флекс-контейнеров. Это как и зачем? Как картинка может быть флекс-контейнером?
Вы явно не понимаете что пишите.

[Сергей Ракипов]

Это случайно.

[Ankhena]

Сергей Ракипов, Задавайте пропорции блоку (по-английски пишется block), а картинке object-fit.
И не забудьте flex-shrink для обертки.

[Сергей Ракипов]

Ankhena, И не забудьте flex-shrink для обертки. а как?

[Ankhena]

Сергей Ракипов, если не хотите, чтобы сжимались, то 0. Если хотите, то соответственно.