Início / user-1626866

BobtheMagicMoose's questions

Martin Hope
BobtheMagicMoose
Asked: 2025-04-24 22:44:51 +0800 CST
  • 5

Quero ter uma galeria de imagens com miniaturas onde cada imagem mantenha sua proporção e cada linha da galeria ocupe largura total. A única maneira de conseguir isso parece ser:

  • selecione o número de imagens que caberão na linha em uma altura normal
  • aumentar a altura das imagens na linha até que ela tenha largura total.

É possível criar esse layout apenas via CSS? Tenho quase certeza de que a resposta é "não", mas só queria verificar, pois imagino que seja um problema muito comum (tanto o OneDrive quanto o Google Fotos parecem fazer isso por meio de cálculos manuais). As abordagens de CSS que me vêm à mente incluem usar uma caixa flexível (ou grade) e ter espaço extra ou aumentar/recortar a imagem para preencher o espaço.

.root{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
  border:2px solid black;
  & div{
    border: 1px solid blue;
    height: 100px;
  }
  
  & .portrait{
    aspect-ratio: 3 / 2;
    }
  & .landscape{
    aspect-ratio: 2 / 3;
  }
}

.desired{
  & div:nth-of-type(1), div:nth-of-type(2), div:nth-of-type(3){
    height: 134px;
  }
  & div:nth-of-type(4), div:nth-of-type(5), div:nth-of-type(6){
    height: 109px;
  }
}
  
<div>
Current:
  <div class="root">
    <div class="portrait">s</div>
    <div class="landscape">w</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="landscape">w</div>
  </div>
Desired:
  <div class="root desired">
    <div class="portrait">s</div>
    <div class="landscape">w</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="landscape">w</div>
  </div>

css