Как вырастить элемент в обоих направлениях в CSS? ⇐ Html

[Anonymous]

document.addEventListener('click', () => {
document.querySelector('#resizer').classList.toggle('tall');
});< /code>
#resizer {
counter-reset: figure;
border: 1px solid black;
width: 300px;
height: 200px;
overflow: scroll;
}

#resizer.tall {
height: 400px;
}

figure {
border: 1px solid green;
position: relative;
width: calc(100% - 2px);
aspect-ratio: 100 / 70;
margin: 0;
}

figure::before {
counter-increment: figure;
content: counter(figure);
position: absolute;
left: 50%;
color: black;
}< /code>










< /code>
< /div>
< /div>
< /p>
Когда вы делаете контейнер выше в CSS, поведение по умолчанию, по -видимому, для того, чтобы показать больше контента в нижнем направлении. Элемент «растет» сверху вниз. src = "https://i.sstatic.net/mhwcfvpb.jpg"/>

Как я могу достичь.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ons-in-css