sergei2210
@sergei2210
Кратко о себе

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

Нашел вот такое решение, и оно рабочее.
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>
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы