-3

Preciso que todo o conteudo de uma div composta apenas por imagens respeite o tamanho dela e mantendo o justify-content: center, sendo que a div tem um tamanho pré definido ja pelo elemento pai.

Segue o codigo:

HTML:

<div class="imgs">
                <img src="./source/image/parceiros/aht.jpg" alt="">
                <img src="./source/image/parceiros/almeida-mercado.jpg" alt="">
                <img src="./source/image/parceiros/angeloni.jpg" alt="">
                <img src="./source/image/parceiros/body-tech.jpg" alt="">
                <img src="./source/image/parceiros/ariam-equipamentos.jpg" alt="">
                <img src="./source/image/parceiros/burguerKing.jpeg" alt="">
                <img src="./source/image/parceiros/cocoBambu.jpeg" alt="">
                <img src="./source/image/parceiros/eletrofrio-refrigeracao.jpg" alt="">
                <img src="./source/image/parceiros/max-atacadista.png" alt="">
                <img src="./source/image/parceiros/super-muffato.jpg" alt="">
                <img src="./source/image/parceiros/superMuffatoAutoPosto.jpeg" alt="">
                <img src="./source/image/parceiros/outback.jpeg" alt="">
                <img src="./source/image/parceiros/plotter.jpeg" alt="">
                <img src="./source/image/parceiros/sao-rafael.png" alt="">
                <img src="./source/image/parceiros/arneg.png" alt="">
                <img src="./source/image/parceiros/swift.jpeg" alt="">
                <img src="./source/image/parceiros/tradicaoMinas.jpeg" alt="">
            </div>

CSS:

.imgs {
    display: flex;
    align-items: center;
    height: auto;
    max-width: 100%;
    justify-content: center;
}

.parceiros img{
    width: 5vw;
    margin: 1rem;
}
1
  • Seja mais especifico , nao tem como ajudar sem o real problema , vou atualizar seu código , rodei aqui , o problema que vejo é quando o elemento pai esta com um tamanho 'fixo' nao surte efeito real na pagina causando um overlfow. Nao sou muito experiente mas pelo que experencio ocorre principalmente ou quase unicamente com imagens . Vou tentar trazer uma soluçao baseada nisso mas edite e traga mais informaçoes antes de postar algo . 24/12/2022 às 20:52

1 Resposta 1

-3

Possivel solução caso seu problema seja o overflow da div mesmo com o elemento pai estando com um tamanho fixado, oque acontece com imagens se voce nao definir o overlfow desse elemento pai :

.elemento_pai {
    margin: 0 auto;
    width: 500px;
    overflow: scroll;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'system-ui', 'sans-serif';
    font-weight: 300;
    transition: .3s linear 0s all;
}
h6 {
    font-weight: 600;
}
h5, h4 {
    font-weight: 500;
}
.imgs {
    display: flex;
    align-items: center;
    height: auto;
    max-width: 100%;
    justify-content: center;
}

.elemento_pai {
    margin: 0 auto;
    width: 500px;
    overflow: scroll;
}

.parceiros img{
    width: 5vw;
    margin: 1rem;
}

</style>
</head>
<body>
<div class="parceiros elemento_pai">
    <div class="imgs">
        <img src="https://images.pexels.com/photos/2527491/pexels-photo-2527491.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/2119953/pexels-photo-2119953.png?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1870320/pexels-photo-1870320.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1441597/pexels-photo-1441597.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1485968/pexels-photo-1485968.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1447884/pexels-photo-1447884.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1499344/pexels-photo-1499344.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1521304/pexels-photo-1521304.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/2527491/pexels-photo-2527491.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/2119953/pexels-photo-2119953.png?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1870320/pexels-photo-1870320.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1441597/pexels-photo-1441597.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1485968/pexels-photo-1485968.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1447884/pexels-photo-1447884.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1499344/pexels-photo-1499344.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1521304/pexels-photo-1521304.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
    </div>
</div>
</body>
<script>

</script>
</html>

Voce tambem deve SEMPRE definir a propriedade flex-wrap da flexbox !!!

Veja como fica a Classe .imgs com o flex-wrap:wrap; !!

.imgs {
    display: flex;
    flex-wrap: wrap; /* sempre defina, seja wrap ou nowrap(padrão) */
    align-items: center;
    height: auto;
    max-width: 100%;
    justify-content: center;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'system-ui', 'sans-serif';
    font-weight: 300;
    transition: .3s linear 0s all;
}
h6 {
    font-weight: 600;
}
h5, h4 {
    font-weight: 500;
}
.imgs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    max-width: 100%;
    justify-content: center;
}

.elemento_pai {
    margin: 0 auto;
    width: 500px;
    overflow: scroll;
}

.parceiros img{
    width: 5vw;
    margin: 1rem;
}

</style>
</head>
<body>
<div class="parceiros elemento_pai">
    <div class="imgs">
        <img src="https://images.pexels.com/photos/2527491/pexels-photo-2527491.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/2119953/pexels-photo-2119953.png?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1870320/pexels-photo-1870320.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1441597/pexels-photo-1441597.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1485968/pexels-photo-1485968.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1447884/pexels-photo-1447884.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1499344/pexels-photo-1499344.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1521304/pexels-photo-1521304.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/2527491/pexels-photo-2527491.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/2119953/pexels-photo-2119953.png?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1870320/pexels-photo-1870320.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1441597/pexels-photo-1441597.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1485968/pexels-photo-1485968.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1447884/pexels-photo-1447884.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1499344/pexels-photo-1499344.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
        <img src="https://images.pexels.com/photos/1521304/pexels-photo-1521304.jpeg?auto=compress&cs=tinysrgb&w=600" alt="">
    </div>
</div>
</body>
<script>

</script>
</html>

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 .