@Arsenij00

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

Есть блок контейнер 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/
  • Вопрос задан
  • 84 просмотра
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Используй расчеты на JS.
Ответ написан
Aetae
@Aetae
Тлен
К сожалению css\html так устроен, что только одно измерение динамически может зависеть от другого, так что это невозможно без скриптов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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