6

Digamos que eu tenha 4 div, com a propriedade width:25%. Em um espaço de 1000px, esses 25% representariam 250px.

<div style="width:1000px"></div>
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>
</div>

Usando somente o css, seria possível "capturar" a largura da div responsiva em pixels e aplicar esse valor capturado a propriedade height.

Seria algo como:

<div style="width:1000px"></div>
    <div style="width:25%; height: 250px"></div>
    <div style="width:25%; height: 250px"></div>
    <div style="width:25%; height: 250px"></div>
    <div style="width:25%; height: 250px"></div>
</div>

Minha dúvida se resume apenas ao css, se é possível fazer isso usando apenas css, pois sei que é possível alcançar esse objetivo usando js.

0

4 Respostas 4

8

Tem uma forma bem simples para isso uma é usando calc(), e flex e CSS variable. A outra é o hake do padding e mantendo o aspect-ratio de forma mais responsiva, pois vc vai ver que o padding-top que vai criar a altura é relativo a largura do container

Técnica com calc(), e flex e CSS variable

Repare que eu vou declara um valor na variável --debug: ; no caso 1000px e depois vou declara var(--debug) como width e no height vou usar a função calc() do CSS para dividir var(--debug) por 4, fazendo assim calc(var(--debug) / 4).

Repare no Gif abaixo que conforme eu vou mudando o valor da variável --debug a largura e proporcionalmente a altura tb vai mudando.

inserir a descrição da imagem aqui

Então o que temos é um valor só que é declarado na variável, essa variável eu uso como width e essa mesmo variável do width eu dividido por 4 no heigth.

inserir a descrição da imagem aqui

Veja eu vc ainda pode usar um Media Queries para mudar o valor de --debug e assim mudar todo o container de forma proporcional alterando apenas um valor. Vc teria algo como esse CSS abaixo. Lembrando ainda que vc pode declarar essas variáveis direto no :root como vc pode ler aqui O que significa o -- especificado no :root do css do bootstrap?

@media (max-width: 1000px) {
  .container {
    --debug: 768px;
  }
}
@media (max-width: 768px) {
  .container {
    --debug: 320px;
  }
}

inserir a descrição da imagem aqui

Segue o código da imagem acima (Exiba em página toda para ver a responsividade):

  * {
    box-sizing: border-box;
  }

  .container {
    --debug: 1000px;
    width: var(--debug);
    height: calc(var(--debug) / 4);
    display: flex;
    margin: auto;
  }

.item {
  flex: 1;
  border: 1px solid #000;
}

@media (max-width: 1000px) {
  .container {
    --debug: 600px;
  }
}
@media (max-width: 600px) {
  .container {
    --debug: 480px;
  }
}
<div class="container">
  <div class="item">item no container</div>
  <div class="item">item no container</div>
  <div class="item">item no container</div>
  <div class="item">item no container</div>
</div>


Técnica que deixa o aspect-ratio do container usando padding-top

Repare que eu tenho agora dois containers, um .container e dentro dele o container .pai que é o pai dos .item.

O padding-top é relativo a largura do elemento, então eu tenho um primeiro container sem largura definida e como um padding-top de 25%, ou seja 1/4 da altura do próprio elemento. Para esse padding não empurrar o conteúdo interno para baixo eu precisei de outro container, o container .pai que está com position:absolute e tem 100% da height e width do .container principal que é o pai dele.

inserir a descrição da imagem aqui

Esse container .pai tem display:flex e os filhos deles flex:1 para ficarem divididos igualmente em 4 porções do .pai.

* {
  box-sizing: border-box;
}
.container {
  position: relative;
  /* overflow: auto; */
  border: 1px solid #f00;
  padding-top: 25%;
}
.pai {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
}
.item {
  flex:1;
  border: 1px solid #000;
}
<div class="container">
  <div class="pai">
      <div class="item">item no container</div>
      <div class="item">item no container</div>
      <div class="item">item no container</div>
      <div class="item">item no container</div>
  </div>
</div>

0

Sem usar flexbox, você pode usar float: left nas divs e overflow: auto no contêiner, utilizando a técnica do aspect ratio 1:1 com padding-top com o mesmo valor do width, ou seja, 25%:

.boxes{
   overflow: auto;
}

.boxes div{
   width: 25%;
   padding-top: 25%;
   float: left;
}

/* abaixo é só para ilustração, não inclua no CSS */
.boxes div:nth-child(odd){
   background: #ddd;
}

.boxes div:nth-child(even){
   background: #f5f5f5;
}
<p>Parágrafo acima</p>
<div class="boxes">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>
<p>Parágrafo abaixo</p>

Desta forma temos 4 divs com 25% da tela (ou do contêiner), uma ao lado da outra e com a mesma altura.

Caso queira adicionar conteúdo nas divs (texto ou imagem), pode inserir spans dentro das divs filhas, com posicionamento absoluto e com as dimensões 100% largura e altura definidos pelas propriedades top, right, bottom, e left em 0:

.boxes{
   overflow: auto;
}

.boxes div{
   position: relative;
   width: 25%;
   padding-top: 25%;
   float: left;
}

.boxes div span{
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   padding: 10px; /* OPCIONAL: espaçamento das bordas */
}

/* abaixo é só para ilustração, não inclua no CSS */
.boxes div:nth-child(odd){
   background: #ddd;
}

.boxes div:nth-child(even){
   background: #f5f5f5;
}
<p>Parágrafo acima</p>
<div class="boxes">
   <div>
      <span>Texto ou imagem</span>
   </div>
   <div>
      <span>Texto ou imagem</span>
   </div>
   <div>
      <span>Texto ou imagem</span>
   </div>
   <div>
      <span>Texto ou imagem</span>
   </div>
</div>
<p>Parágrafo abaixo</p>

Se for adicionar bordas nas divs, coloque box-sizing: border-box para que as mesmas sejam aplicadas nos limites de 25% das divs, e não na parte de fora. Por exemplo:

.boxes{
   overflow: auto;
}

.boxes div{
   position: relative;
   width: 25%;
   padding-top: 25%;
   float: left;
   border: 2px solid #444;
   box-sizing: border-box;
}

.boxes div span{
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   padding: 10px;
}

/* abaixo é só para ilustração, não inclua no CSS */
.boxes div:nth-child(odd){
   background: #ddd;
}

.boxes div:nth-child(even){
   background: #f5f5f5;
}
<p>Parágrafo acima</p>
<div class="boxes">
   <div>
      <span>Texto ou imagem</span>
   </div>
   <div>
      <span>Texto ou imagem</span>
   </div>
   <div>
      <span>Texto ou imagem</span>
   </div>
   <div>
      <span>Texto ou imagem</span>
   </div>
</div>
<p>Parágrafo abaixo</p>

-2
+500

Se você souber a largura do container na unidade de medida vw, basta usar esse valor dividido por 4 nos filhos, por exemplo, se o container for do tamanho máximo da tela, a altura será de 25vw, se o container for de 80% da tela (ou 80 vw), a altura será de 20vw, etc

Isso porque o valor usado pelo vw é o mesmo independentemente se usado na altura ou largura, assim como o vh e o vmin

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
div.row {
  width: 80vw;
  display: block;
  margin: 0 10vw;
  padding: 0;
}
div.col {
  width: 20vw; /* ou 25% */
  height: 20vw; /* ou calc(80vw / 4) */
  display: block;
  float: left;
  background-color: darkblue;
  margin: 0;
  padding: 0;
  border: 1px solid darkred;
  box-sizing: border-box;
}
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

-3

Olá, tente dessa forma e veja se resolve seu problema.

<div style="width:100px; height: 400px; background: #4a4a4a">
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .