Как динамически менять ширину и высоту контейнера в зависимости от контента с сохранением пропорций?

Question

[Арсений]

Есть блок контейнер art содержащий некоторый текст.

<div class="wrapper">
  <div class="art">
    <div class="art__container">
      <div class="art__content">
         <div class="art__text">Something text Something text Something text Something text Something text</div>
      </div>            
    </div>            
  </div>  
</div>

Задача, чтобы контейнер всегда был в пропорции 1:1 и имел минимальные размеры, текст был в него вписан, при этом сам текст может изменятся динамически, то есть и контейнер должен увеличиваться с сохранением указанных пропорций. Для этого обёртке я задал padding-bottom: 100%, а контенту position: absolute. Однако тогда контейнер растягивается на всю ширину экрана, а не подстраивается под контент.

Как сделать так, чтобы размеры контейнера были минимальными, вмещая в себя текст и имея пропорции 1:1, при этом при увеличении текста контейнер также увеличивался бы с сохранением этих пропорций?

.art__container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.art__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-image: url("http://placeimg.com/640/480/any");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 4px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
}

Вот рабочий пример https://jsfiddle.net/arsenij00/pynoL3km/13/

Comments

[Kovalsky]

Походу с помощью css это невозможно, единственный топик на SO практически пустой - https://stackoverflow.com/questions/49911168/css-k...

Answer 1

[Арсений Матыцин]

Используй расчеты на JS.

Answer 2

[Aetae]

К сожалению css\html так устроен, что только одно измерение динамически может зависеть от другого, так что это невозможно без скриптов.