How to align the display of images respecting the individual height of each one?

Asked

Viewed 88 times

2

The display of my images is irregular. See below:

inserir a descrição da imagem aqui

I need them to be displayed in a straight line. I made a montage below to illustrate how I would like them to be displayed, because I know that one image will be bigger than the other.

inserir a descrição da imagem aqui

CSS:

figure.mais_detalhes_guia_comercial_fotos{
  width: 100%;
  max-width: 1200px;
  margin-top: 10px;
  box-sizing: border-box;
}

figure.mais_detalhes_guia_comercial_fotos img{
  float: left;
  width: 45%;
  margin: 2px;
  box-sizing: border-box;
  border: 1px #FF8922 solid;
}

HTML

<figure class="mais_detalhes_guia_comercial_fotos">
    <img src="./adm-gc/fotos/<?php echo $gc_detalhes_fotos['foto']; ?>" alt="Guia Comercial - Guarapari">
</figure>
css

  • Friend has plugin to do this... let me find here

  • Images are loaded dynamically ?

  • @Yes. It is dynamically charged.

  • If there are two columns, you can create a div for each two images that are dynamically loaded and your problem will be solved.

1 answer

0

To do this the structure <html> has to be modified, it is necessary to create two columns, and I advise you to use <div> for the division of columns. Follow the code:

HTML:

    <!--COLUNA-1-->
    <div class="coluna">
        <!--EXEMPLO IMAGENS GERADAS PELO LOOP-->
        <figure class="mais_detalhes_guia_comercial_fotos">
            <img src="example1.png">
        </figure>
        <figure class="mais_detalhes_guia_comercial_fotos">
            <img src="example2.png">
        </figure>
        <figure class="mais_detalhes_guia_comercial_fotos">
            <img src="example3.png">
        </figure>
    </div>

    <!--COLUNA-2-->
    <div class="coluna">
        <!--EXEMPLO IMAGENS GERADAS PELO LOOP-->
        <figure class="mais_detalhes_guia_comercial_fotos ">
            <img src="example4.png">
        </figure>
        <figure class="mais_detalhes_guia_comercial_fotos ">
            <img src="example5.png">
        </figure>
        <figure class="mais_detalhes_guia_comercial_fotos ">
            <img src="example6.png">
        </figure>
    </div>

In the CSS the change I made was basically giving width: 50% in the column and the <img> catch 100% this wide:

CSS:

.coluna{
    float: left;
    width: 50%;
    max-width: 1200px;
    margin-top: 10px;
    box-sizing: border-box;
}

.mais_detalhes_guia_comercial_fotos img{
    width: 100%;
    box-sizing: border-box;
    border: 1px #FF8922 solid;
}

/* RESET OPCIONAL NO FIGURE */
figure{
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

/*IMPORTANTE APENAS PARA O EXEMPLO, IGNORAR O ESTILO ABAIXO*/
.coluna:nth-child(1) .mais_detalhes_guia_comercial_fotos:nth-child(1) img{
    height: 100px;
}

.coluna:nth-child(1) .mais_detalhes_guia_comercial_fotos:nth-child(2) img{
    height: 200px;
}

.coluna:nth-child(1) .mais_detalhes_guia_comercial_fotos:nth-child(3) img{
    height: 200px;
}

.coluna:nth-child(2) .mais_detalhes_guia_comercial_fotos:nth-child(1) img{
    height: 300px;
}

.coluna:nth-child(2) .mais_detalhes_guia_comercial_fotos:nth-child(2) img{
    height: 50px;
}

.coluna:nth-child(2) .mais_detalhes_guia_comercial_fotos:nth-child(3) img{
    height: 150px;
}

Browser other questions tagged css

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