Flex: empêcher les images de s'étirer

Bonsoir,

Comme le montre la copie d'écran ci-dessous mes images s'étirent verticalement.Comment les en empêcher?

Voici le code:

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ebebeb;
    padding-top: 50px;
}
footer article.texte {
    margin-bottom: 0;
}
div.carte {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 100px;
    justify-content: center;
    padding-bottom: 50px;
}
div.carte img {
    display: block;
    max-width: 150px;
    max-height: auto;
    flex-grow: 0;
}

<article class="footer">
      <div class="carte">
          <img src="logo-meuble-de-tourisme-3-etoiles.jpg" alt="image">
          <img src="logo-3-epis-gite-de-france.png" alt="image">
          <img src="ancv_connect.png" alt="image">
          <img src="logo-destination-quimperle-les-rias.png" alt="image">
      </div>         
    </article>

Merci pour votre aide.

Cdt

Hello,

C'est un grand classique de Flexbox : l'alignement vertical par défaut (propriété align-items) est stretch. Il faut la corriger et appliquer par exemple un align-items: flex-start; sur le parent.

PS : alt="image" n'est pas très utile en terme de contenu pour les assistances techniques ou les moteurs de recherche. Il faudrait renseigner ici le vrai contenu que l'on voit sur l'image.
Modifié par Raphael (22 Jan 2024 - 09:05)

Bonjour,

Merci beaucoup ça fonctionne parfaitement. Du coup comment faire pour centrer les images verticalement les unes par rapport aux autres. Comme elles n'ont pas toutes la même hauteur si elles ne sont pas centrées ce n'est pas très joli.

Cdt

Tu peux remplacer la valeur flex-start par center.

N'hésite pas à te renseigner sur Flexbox car c'est un mode de position vraiment très pratique (en compagnie de Grid Layout).

Au hasard... https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html
Modifié par Raphael (22 Jan 2024 - 10:03)