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

0

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

Изображение 174551

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

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

<div style="display:flex;align-items:center">
    <div id="yellow" style="height:50%">
    </div>
</div>

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

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

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

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

Теги:
flexbox

5 ответов

3

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

#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;
}
<div id="blue" >
  <div id="yellow" >
    <img src="https://picsum.photos/500/500?image=1069" >
    <div class="content">Some content here</div>
  </div>
</div>

Но в случае, если высота синего является фиксированным значением, лучше полагаться на переменную CSS следующим образом:

#blue {
  display: flex;
  align-items: center;
  justify-content:center;
  --h:80vh;
  height:var(--h);
  background: blue;
}

#yellow {
  height: calc(var(--h) / 2);
  width:calc(var(--h) / 2);
  background: yellow;
  position:relative;
}
<div id="blue" >
  <div id="yellow" >
    <div class="content">Some content here</div>
  </div>
</div>
Поделиться
  • 0
    Это одновременно и гениально, и пустая трата времени, ха-ха (из-за дополнительного вызова ресурсов). Понимаю. я мог бы сделать с определением ширины вместо высоты, хотя, пока я могу держать ее в квадрате, есть ли где-нибудь, где вы можете указать мне на трюк, который вы упомянули при заполнении? Впервые я слышу об этом.
  • 0
    @ GeorgeAvgoustis я обновляю другим примером;) но вы можете сослаться на это: stackoverflow.com/questions/1495407/…
2

Аналогичный ответ на тот, который предоставлен 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%;}
}
<div class="container">
  <div class="aspectRatio">
    <svg viewBox="0 0 1 1"></svg>
    <div class="inner">square</div>
  </div>
</div>
<div class="container">
  <div class="aspectRatio">
    <svg viewBox="0 0 4 3"></svg>
    <div class="inner">ratio 4/3</div>
  </div>
</div>
Поделиться
  • 0
    хороший;) но анимация для чего?
  • 0
    @TemaniAfif Я никогда не знаю почему, но это необходимо. Если вы этого не сделаете, иногда при изменении размера не адаптируются размеры. Попробуйте это на свой ответ. изменить размер / сделать полную страницу несколько раз, и время от времени вы не получите квадрат. - оплавление не рассчитывается нормально. Это старый трюк, но я никогда не видел объяснения, почему это работает
Показать ещё 1 комментарий
0

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

     .outerdiv 
     {
     background-color: lightblue;
     height: 100px;
     display: grid;
     align-items: center;
     }
     .innerdiv 
     {
     background-color: lightyellow;
     height: 50%;
     width: 50px;
     margin:0 auto;
     }
     <div style="" class="outerdiv"> 
     <div id="yellow" class="innerdiv"></div>
     </div>
Поделиться
0

Если вы вращаетесь на 90 градусов, это возможно :)

  • переменная ширина и высота родительского (и отношения)
  • ребенок всегда на 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;
}
<div class="flex">
  <div class="item"></div>
</div>

<hr>

<div class="flex large">
  <div class="item"></div>
</div>
Поделиться
0

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

.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;
}
<div style="" class="outer">

<div id="yellow" class="inner">
</div>

</div>
Поделиться
  • 0
    Это работает, и как я настроил это прямо сейчас, но не динамично, это предполагает фиксированную высоту во внешнем. Я пытаюсь выяснить, есть ли решение, которое работает для любой высоты Х
  • 0
    я думаю, что это будет работать динамически @GeorgeAvgoustis

Ещё вопросы

Сообщество Overcoder
Наверх
Меню