Automatic resizing and adjustment in an image

Question

Automatic resizing and adjustment in an image

Navigation

#1 by (0 votes)

1

Hello, how are you?

I would like to know how to do within a section, a set of photos side by side 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:

HowIwanteditrendered:

Thank you in advance!

html5 css3

asked by anonymous 24.06.2018 / 19:41

1 answer

Manipulation of sql temporary tables in delphi Put sound in app notifications

score 0 · Accepted Answer

Since you are using flex box , the <li> will have the height of the highest <li> , that is, a larger image in height will pull the height of the other li s .

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 loads and when it is resized, making the setting 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>