-1

Gostava de saber como fazer para uma imagem que esta dentro de uma div e a imagem tem altura menor que as demais ? obs:Todas tem uma class com height auto.

body{ background-color: #1d1d1d; } img#picJD1, img#picJD3{ width:200px; border: 0.5px solid white; border-radius: 100px; } img#picJD1{ opacity: 0.2; } img#picJD3{ opacity: 0.8; } img#picJD2{ width: 250px; border: 0.5px solid white; border-radius: 125px; } @font-face { font-family: SpecialElite-Regular; src: url("css/SpecialElite-Regular.ttf") format("truetype"); } h2{ font-family: "SpecialElite-Regular"; } .fab, .fas{ font-size: 50px; color: white; margin-top: 20px; } .fas{ color: rgb(197, 34, 51); } .redes-sociais{ text-align: center; border-bottom: none; padding-bottom: 50px; } i.fab.fa-instagram-square{ margin-left: 100px; margin-right: 100px; } #telefone, #mail, #morada{ display: inline-block; width: 25%; padding: 0px 50px; } #mail{ border-right: 1px solid white; border-left: 1px solid white; } .contactos-texto{ color: white; } .dropdown{ margin: 0; padding: 0; list-style-type: none; overflow: hidden; } li{ float:left; } li a{ display: block; padding:14px 16px ; text-decoration: none; text-align: center; color: white; } li a:hover{ background-color: #82202a; } div.galery{ float: left; margin: 2%; width: 20%; border: 0.5px solid black; } div.galery:hover{ border: 1px solid white; } div.galery img{ width: 100%; height: auto; } div.desc{ padding: 15px; color: white; text-align: center; font-size: 16px; }
  • Home
  • Sobre
  • Hobbies
  • Contactos
  • </ul>
    
    Sobre
    <div class="galeria-image">
    
        <div class="galery">
            <a href="pictures/3837.webp" target="_blank" >
                <img src="pictures/3837.webp" alt="imagem johndoe" width="20%">
            </a>
    
            <div class="desc">John doe primeiro</div>
        </div>
    
        <div class="galery">
            <a href="pictures/Anonymous_emblem.svg.png" target="_blank">
                <img src="pictures/Anonymous_emblem.svg.png" alt="imagem john doe segundo" width="20%">
            </a>
            <div class="desc">John doe segundo</div>
        </div>
    
        <div class="galery">
            <a href="pictures/avatars-000425326518-6qekg1-t500x500.jpg" target="_blank">
                <img src="pictures/avatars-000425326518-6qekg1-t500x500.jpg" alt="imagem john doe terceiro" width="20%">
            </a>
            <div class="desc">Joh  doe terceiro</div>
        </div>
    
        <div class="galery">
            <a href="pictures/shutterstock_1960476523.jpg" target="_blank">
                <img src="pictures/shutterstock_1960476523.jpg" alt="John doe quarto" width="20%">
            </a>
            <div class="desc">John doe quarto</div>
        </div>
    
    </div>
    
    <a href="https://www.facebook.com/" target="_blank"><i
    

    class="fab fa-facebook-f">

    +351 123 456 789

    [email protected]

    Avenida das Ruas n1

    1 Resposta 1

    -2

    Neste caso height auto não vai funcionar pq height auto já é o padrão da imagem então a imagem virá com o tamanho que ela tem, tenta tirar o height auto e colocar um display: flex; no elemento pai das imagens. Elas vão ficar do mesmo tamanho mas para entender melhor esse comando precisa estudar FlexBox, não sei se você já estudou mas se ainda não acredite FlexBox é a salvação para qualquer iniciante em html e css, é extremamente simples e você resolve praticamente tudo em questão de posicionamento e tamanho.

    1
    • muito obrigado shaos, deu certo ! HM nao sabia que flexbox era tão bom assim, eu ja cheguei a estudar sim mas acho que fiz uns dois exercicios usando ele não foi muito, mas obrigado pela dica vou olhar mais sim . Commented 2/01/2023 às 13:42

    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 .