Intereting Posts
Предупреждение: mysql_fetch_object (): предоставленный аргумент не является допустимым ресурсом результата MySQL Могу ли я включить представление совместимости IE 10 с использованием JavaScript или HTML? Можно ли добавить дополнительные HTML-tags HTML (например, ) в HTML-парсер браузера? Как прикреплять нижний колонтитул к нижней (не фиксированной) даже при прокрутке Как программно создавать URL-адреса с помощью AngularJS css ширина такая же, как высота Как отобразить тег HTML из значения json с помощью angularJs установка минимальной ширины div Html и Internet Explorer: как избежать скрытых элементов для копирования / вставки Данные Django ‘ManagementForm отсутствуют или были подделаны’ при сохранении modelForms с внешним ключом Установите правильную ширину и столбец заголовка во время замораживания заголовка в gridview Как наложить maxlength на textArea в HTML с помощью JavaScript div с фиксированным положением Получение текста следующего брата с помощью jQuery Типы URL-адресов

Внутренний div с квадратным отношением и flexbox

Я пытаюсь добиться следующего:

введите описание изображения здесь

Где синий ящик имеет переменную высоту, а желтый ящик всегда имеет высоту 50% от синего квадрата.

Его довольно простое использование flex

Проблема в том, что im пытается удержать внутренний ящик в определенном соотношении, в данном случае квадрат. Как я подхожу к этому?


Бонусные очки:

  • Как я обычно указываю соотношение? Есть ли решение, которое работает не только для 1: 1, но и для любого x: y?
  • Как я могу это сделать, не используя flexbox, хотя потенциально все еще нацелен на a)?

Дополнительная информация: синяя коробка всегда шире, чем выше, подумайте о кнопке.

Я не думаю, что есть способ определить ширину, используя высоту (даже если мы можем сделать обратное, используя какой-то трюк, например дополнение), но идея состоит в том, чтобы полагаться на квадратное изображение, которое вы делаете невидимым, чтобы сохранить соотношение , Затем содержимое должно быть позиционировано:

 #blue { display: flex; align-items: center; justify-content:center; height:80vh; background: blue; } #yellow { height: 50%; background: yellow; position:relative; } img { max-height:100%; visibility:hidden; } #yellow .content { position:absolute; top:0; right:0; left:0; bottom:0; } направо #blue { display: flex; align-items: center; justify-content:center; height:80vh; background: blue; } #yellow { height: 50%; background: yellow; position:relative; } img { max-height:100%; visibility:hidden; } #yellow .content { position:absolute; top:0; right:0; left:0; bottom:0; } 
 
Some content here

Аналогичный ответ на тот, который предоставлен Temani Afif, но с использованием svg вместо изображения (так что нет необходимости в дополнительном запросе).

Кроме того, легче адаптировать его к произвольным пропорциям

 .container { height: 150px; background-color: lightblue; display: flex; align-items: center; justify-content: center; margin: 10px; } .aspectRatio { display: grid; background-color: yellow; height: 50%; } .aspectRatio svg { height: 100%; border: solid 1px red; animation: resize 1s infinite; } .aspectRatio > * { grid-area: 1 / 1 / 2 / 2; } @keyframes resize { from {height: 100%;} to {height: 99.9%;} } 
 
square
ratio 4/3

Посмотрите, поможет ли это вам,

 .outer { background-color: lightblue; height: 100px; /* Change as per your requirement */ display: flex; align-items: center; justify-content: center; max-width: 200px; /* You can Remove this */ } .inner { background-color: lightyellow; height: 50%; width: 50px; } 
 

Если вы повернуть на 90 gradleусов, это возможно 🙂

  • переменная ширина и высота родительского (и отношения)
  • ребенок всегда на 50% выше своего родителя
  • и квадрат

Это будет похоже на другой контент, если он хочет из-за преобразования.

Кодепен

 .flex { display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */ width: 12rem; height: 20rem; vertical-align: middle; /* "vertical" centering */ transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */ background-color: lightblue; } .flex.large { height: 35rem; } .item { width: 50%; height: 0; margin-left: 25%; /* "horizontal" centering */ padding-top: 50%; /* padding-top trick for a square */ background-color: lightyellow; } 
 

Попробуйте это, если это может вам помочь. (Без гибкости)

  .outerdiv { background-color: lightblue; height: 100px; display: grid; align-items: center; } .innerdiv { background-color: lightyellow; height: 50%; width: 50px; margin:0 auto; }