Поддерживать соотношение сторон с CSS вместо JavaScript [Duplicate] ⇐ Html

[Anonymous]

Я использую Flex, чтобы расположить серию кнопок в контейнере для обертки. Регулярные кнопки получают свои ширины и высоты в зависимости от прокладки и внутреннего текста, но кнопка изображения устанавливает свою высоту на 100%. Проблема, которую я имею, заключается в том, что единственный способ, которым я смог сохранить квадратное соотношение сторон кнопки изображения, - это установить его ширину на его высоту, используя JavaScript.
Есть ли способ сделать это с CSS? class = "Snippet">

makeSquare(".image button");
window.addEventListener("resize", () => {
makeSquare(".image button");
});

function makeSquare(selector) {
const buttons = document.querySelectorAll(selector);
buttons.forEach((button) => {
button.style.width = `${button.offsetHeight}px`;
});
}< /code>
.wrapper {
display: flex;
align-items: stretch;
}

.regular button {
padding: 20px 40px;
background-color: #aaaaaa;
}

.image button {
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}< /code>


RegA



RegB

< /code>
< /div>
< /div>
< /p>
Я попытался заставить это работать с CSS-Ratio, но у меня не было никакого успеха. Я не уверен, что это работает с динамической высотой.


Подробнее здесь: https://stackoverflow.com/questions/796 ... javascript