Resize and auto-adjust an image

Asked

Viewed 87 times

1

Hello, all right?

I would like to know do inside a section, a set of photos next to each other with different sizes.

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;
}

How my code is rendering:

Imagem de uma seção em HTML

How I wanted it to render:

Imagem de uma seção em HTML

Thank you very much in advance!

html5 css3

  • Dude try to separate your questions into steps, and try to be clearer in what you need. Edit your question with the code you already have or with an exploit you want to replicate, your question is very wide

  • All right, thank you very much!

  • Need this border shown in the first image?

1 answer

0


How are you using flex box, as <li> will have the height of the largest <li> that there is, ie, a larger image in height will pull the height of the other lis.

One solution would be to use Javascript to adjust the height of each <li> according to the height of the image it contains.

Creating two events onload and onresize you can adjust when the page is loaded and when it is resized, making the adjustment also responsive:

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>

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.