1

tenho várias imagens que estão da seguinte forma:

inserir a descrição da imagem aqui

Código no front end:

<div class="linha">
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Artesanato com cipó.jpg" style="max-height:100%;max-width:100%" alt="Artesanato com cipó">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Artesanato com fibra de bananeira - Associação Mulheres de Fibra_editado.jpg" style="max-height:100%;max-width:100%" alt="Artesanato com fibra de bananeira - Associação Mulheres de Fibra">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha de cumbaru.jpg" style="max-height:100%;max-width:100%" alt="Castanha de cumbaru">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Oleo de copaíba_editado.jpg" style="max-height:100%;max-width:100%" alt="Óleo de copaíba">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Mel de abelha nativa sem ferrão com Castanha do Brasil.jpg" style="max-height:100%;max-width:100%" alt="Mel de abelha nativa sem ferrão com Castanha do Brasil">
        <img src="~/Areas/ModuloPublico/Content/img/Home/minicolar com sementes_editada.jpg" style="max-height:100%;max-width:100%" alt="Minicolar com Sementes">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Cesto de buriti.jpg" style="max-height:100%;max-width:100%" alt="Cesto de buriti">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Colar produzido com açaí.jpg" style="max-height:100%;max-width:100%" alt="Colar produzido com açaí">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Guaraná em formato de bastão.jpg" style="max-height:100%;max-width:100%" alt="Guaraná em formato de bastão">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha do Brasil in Natura.jpg" style="max-height:100%;max-width:100%" alt="Castanha do Brasil in Natura">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Pitomba.jpg" style="max-height:100%;max-width:100%" alt="Pitomba">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Biscoito de babaçu.jpg" style="max-height:100%;max-width:100%" alt="Biscoito de babaçu">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha do Brasil coberta com chocolate.jpg" style="max-height:100%;max-width:100%" alt="Castanha do Brasil coberta com chocolate">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Farinha de babaçu aberta.jpg" style="max-height:100%;max-width:100%" alt="Farinha de babaçu aberta">
    </div>
</div>

CSS aplicado:

.linha {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.coluna {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

    .coluna img {
        margin-top: 8px;
        vertical-align: middle;
    }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .coluna {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .coluna {
        flex: 100%;
        max-width: 100%;
    }

Como faço para alinhar as imagens para que todas fiquem do mesmo tamanho ?

3
  • edite e pergunta e poste o código para ficar mais fácil de alguém te ajudar. 20/05/2019 às 20:48
  • editado postei o css que está sendo aplicado 20/05/2019 às 20:54
  • Do mesmo tamanho como? Tem imagens horizontais, verticais e quadradas.
    – Meu ovo
    20/05/2019 às 21:18

2 Respostas 2

2

Seu maior problema mesmo é que vc esta usando max- no width e height na imagem, quando na verdade deveria usar somente width e height, sem o max- na frente. Pois usando max- vc limita a largura da imagem ao tamanho original do arquivo, e não ao tamanho disponível no container.

Ajustando isso ficou dessa forma

inserir a descrição da imagem aqui

Segue o código da imagem acima

* {
    box-sizing: border-box;
}
.linha {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.coluna {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

    .coluna img {
        margin-top: 8px;
        vertical-align: middle;
        object-fit: cover;
    }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .coluna {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .coluna {
        flex: 100%;
        max-width: 100%;
    }
}
<div class="linha">
    <div class="coluna">
        <img src="https://placecage.com/100/100" style=" height:auto; width:100%" alt="Artesanato com cipó">
        <img src="https://placecage.com/200/100" style=" height:auto; width:100%" alt="Artesanato com fibra de bananeira - Associação Mulheres de Fibra">
        <img src="https://placecage.com/100/200" style=" height:auto; width:100%" alt="Castanha de cumbaru">
        <img src="https://placecage.com/100/100" style=" height:auto; width:100%" alt="Óleo de copaíba">
    </div>
    <div class="coluna">
        <img src="https://placecage.com/200/100" style=" height:auto; width:100%" alt="Mel de abelha nativa sem ferrão com Castanha do Brasil">
        <img src="https://placecage.com/100/100" style=" height:auto; width:100%" alt="Minicolar com Sementes">
    </div>
    <div class="coluna">
        <img src="https://placecage.com/100/200" style=" height:auto; width:100%" alt="Cesto de buriti">
        <img src="https://placecage.com/200/100" style=" height:auto; width:100%" alt="Colar produzido com açaí">
        <img src="https://placecage.com/100/200" style=" height:auto; width:100%" alt="Guaraná em formato de bastão">
        <img src="https://placecage.com/100/100" style=" height:auto; width:100%" alt="Castanha do Brasil in Natura">
    </div>
    <div class="coluna">
        <img src="https://placecage.com/100/100" style=" height:auto; width:100%" alt="Pitomba">
        <img src="https://placecage.com/100/200" style=" height:auto; width:100%" alt="Biscoito de babaçu">
        <img src="https://placecage.com/100/200" style=" height:auto; width:100%" alt="Castanha do Brasil coberta com chocolate">
        <img src="https://placecage.com/100/100" style=" height:auto; width:100%" alt="Farinha de babaçu aberta">
    </div>
</div>

6
  • bom dia amigo, obrigado pela resposta, porem eu preciso que todas fiquem alinhadas iguais, sem ter essa "quebra" de margem entre elas, dessa forma as imagens ficam desalinhadas, e ha muita sobra de algumas imagens, preciso que todas sejam do mesmo tamanho, ou que pelo menos elas "terminem" na mesma linha, imgur.com/a/SEZ44fO nesse caso a penultima imagem está muito pra baixo, precisaria que ela terminasse na mesma linha das demais mesmo se tivesse que reduzir o tamanho da foto. 21/05/2019 às 11:13
  • Nesse caso basta colocar além do height:auto um max-height de 100 px por exemplo. Então na classe ` .coluna img { }` vc inclui um max-height: 100px; além das outras propriedades que já tem lá, ai vc vai ter esse resultado prntscr.com/nrd4xe
    – hugocsl
    21/05/2019 às 11:20
  • pq só funciona com 100px? se eu coloco 200px ou 300px elas já desalinham novamente.... 21/05/2019 às 11:25
  • @StandAlone realmente só funcionou pq 100px é a altura padrão da menor imagem. Mas pro seu caso vc vai ter que fazer diferente. Primeiro vc tira o max-height: 100px; da classe .coluna img { }. Depois na tag img no HTML onde está height:auto vc coloca o mesmo valor para todas as imagem, tipo <img src="..." style=" height:150px; width:100%" >. Vc tem que colocar a mesma altura para todas as imagem e ai vai ficar sempre alinhado e proporcional. Testa ai qq dúvida me fala
    – hugocsl
    21/05/2019 às 11:52
  • muito obrigado, era isso mesmo que queria! 21/05/2019 às 12:06
-2
  • Coloque Width e height nas divs.
  • Coloque uma classe que vai receber as imagens como background.
  • Na classe coloque os atributos de background-repeat:no-repeat e background-sixe:cover

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 .