Проблема с поддержанием квадратных пропорций в flexbox
У меня есть контейнер с flexbox разметкой, где размещены несколько элементов управления. Обычные кнопки получают размеры автоматически на основе внутреннего содержимого и отступов, но кнопка с изображением растягивается на всю высоту родителя.
Сейчас я использую JavaScript для того чтобы сделать эту кнопку квадратной - устанавливаю ширину равной высоте. Но хотелось бы решить эту задачу средствами CSS.
Текущий код:
JavaScript:
createSquareButton(".picture-btn");
window.addEventListener("resize", () => {
createSquareButton(".picture-btn");
});
function createSquareButton(target) {
const elements = document.querySelectorAll(target);
elements.forEach((element) => {
element.style.width = `${element.offsetHeight}px`;
});
}
CSS:
.container {
display: flex;
align-items: stretch;
}
.text-button button {
padding: 15px 30px;
background-color: #cccccc;
}
.picture-button button {
height: 100%;
background-image: url("example-image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
HTML:
<div class="container">
<div class="text-button">
<button>Кнопка А</button>
</div>
<div class="picture-button">
<button></button>
</div>
<div class="text-button">
<button>Кнопка Б</button>
</div>
</div>
Пробовал использовать CSS свойство aspect-ratio, но не смог заставить его работать с динамической высотой. Возможно ли вообще решить эту задачу только CSS?