1

Olá, tudo bem?

Gostaria de saber faço dentro de uma seção, um conjunto de fotos uma do lado da outra com tamanhos diferentes.

HTML:

<section class="secao-inicio trabalhos">
        <h2 class="centered">Imagens</h2>
        <ul>
            <li><img src="img/foto3.png" alt="Foto 3"></li>
            <li><img src="img/foto2.png" alt="Foto 2"></li>
            <li><img src="img/foto1.png" alt="Foto 1"></li>
        </ul>  
    </section>

CSS:

.trabalhos h2 {
color: #FFF;
}

.trabalhos ul {
    display: -webkit-flex;
    display:         flex;
}

.trabalhos li {
    -webkit-flex: auto;
            flex: auto;
    border: .5em solid #000;
}

.trabalhos li:first-child {
    order: 2;
    transform: scale(1.1);
}

.trabalhos li:nth-child(2) {
    order: 1;

}

.trabalhos li:nth-child(3) {
    order: 3;
}

.trabalhos img {
    width: 100%;
    display: block;
}

Como meu código está renderizando:

Imagem de uma seção em HTML

Como eu queria que renderizasse:

Imagem de uma seção em HTML

Muito obrigado desde já!

3
  • Cara tente separar sua perguntas em etapas, e tente ser mais claro no que precisa. Edite sua pergunta com o codigo que vc já tem ou com um exploro que vc quer replicar, sua pergunta esta muito ampla
    – hugocsl
    Commented 24/06/2018 às 17:59
  • Tudo bem, muito obrigado! Commented 24/06/2018 às 18:18
  • Precisa dessa borda mostrada na primeira imagem?
    – Sam
    Commented 24/06/2018 às 19:30

1 Resposta 1

0

Como você está usando flex box, as <li> terão a altura da maior <li> que houver, ou seja, uma imagem maior em altura irá puxar a altura das outras lis.

Uma solução seria usar JavaScript para ajustar a altura de cada <li> de acordo com a altura da imagem que ela contém.

Criando dois eventos onload e onresize você consegue ajustar quando a página for carregada e quando for redimensionada, tornando o ajuste também responsivo:

window.onload = window.onresize = function(){
   var els = document.querySelectorAll(".trabalhos ul li img");
   for(var x=0 ;x<els.length; x++){
      var alt = els[x].clientHeight;
      els[x].parentNode.style.height = alt+"px";
   }
}
.trabalhos h2 {
color: #FFF;
}

.trabalhos ul {
    display: -webkit-flex;
    display:         flex;
}

.trabalhos li {
    -webkit-flex: auto;
            flex: auto;
    border: .5em solid #000;
}

.trabalhos li:first-child {
    order: 2;
    transform: scale(1.1);
}

.trabalhos li:nth-child(2) {
    order: 1;
}

.trabalhos li:nth-child(3) {
    order: 3;
}

.trabalhos img {
    width: 100%;
    display: block;
}

/* essa parte de baixo não tinha
Adiconei para formatar a ul e as lis*/

ul, li{
   margin: 0;
   padding: 0;
   list-style: none;
}
<section class="secao-inicio trabalhos">
  <h2 class="centered">Imagens</h2>
  <ul>
      <li><img src="https://imagens.canaltech.com.br/123987.210185-JPG.jpg" alt="Foto 3"></li>
      <li><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Foto 2"></li>
      <li><img src="https://vignette.wikia.nocookie.net/sqmegapolis/images/2/2d/RealWorld_Stonehenge.jpg/revision/latest?cb=20150616102050" alt="Foto 1"></li>
  </ul>  
</section>

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 .