html - trick - flexbox example




Div interno con rapporto quadrato e flexbox (4)

Non penso che ci sia un modo per definire la larghezza usando l'altezza (anche se possiamo fare il contrario usando qualche trucco come un'imbottitura) ma un'idea è fare affidamento su un'immagine quadrata che rendi invisibile per mantenere il rapporto . Quindi il contenuto dovrebbe essere posizionato:

#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>

Ma nel caso in cui l'altezza del blu sia un valore fisso, meglio fare affidamento su una variabile CSS come questa:

#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>

Questa domanda ha già una risposta qui:

Sto cercando di ottenere quanto segue:

Se la casella blu è di altezza variabile e la casella gialla ha sempre un'altezza del 50% della casella blu.

È abbastanza semplice usando il flex

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

Il problema è che sto cercando di mantenere la casella interna un rapporto specifico, in questo caso quadrato. Come posso affrontarlo?

Punti bonus:

  • Come posso generalmente specificare un rapporto? Esiste una soluzione che funziona non solo per 1: 1 ma per qualsiasi x: y?
  • Come potrei farlo senza usare la flexbox mentre potenzialmente sto ancora mirando a)?

Informazioni extra: la casella blu è sempre più ampia che più alta, pensa a un pulsante.


Prova questo se può aiutarti. (Senza flessioni)

     .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>

Una risposta simile a quella fornita da Temani Afif, ma usando uno svg invece di un'immagine (quindi non c'è bisogno della richiesta extra).

Inoltre, è più facile adattarlo a rapporti di aspetto arbitrari

.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>


Vedi se questo può aiutarti,

.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>





flexbox