Problème avec une image et Flexbox

mickael62800
Les bases HTML/CSS

Bonjour à tous et à toute,
Je rencontre un probleme avec les Flexbox et le tag <img/>.

J'ai trois rectangles dans mon exemple.
Le 1er se situe a gauche de l'écran. il a la particularité d'être redimensionner sur l'axe X. Il contient une image
Le 2eme se situe à droite de l'écran, il a une valeur fixe => width de 800px. Il à un backgroundcolor en vert
Le 3eme fait office de footer avec une hauteur de 90px. Il a un backgroundcolor en bleue

L'image se situe dans le CSS ==> Aucun probleme, lors du redimensionnement, mon 2eme rectangle reste avec une width de 800px et le rectangle n°1 avec l'image prends la place restante ....

Code ci-dessous

Mon HTML

    <div class="main">
      <div class="contain">
        <div class="rectangle1"></div>
        <div class="rectangle2"></div>
      </div>
      <div class="rectangle3"></div>
    </div>

Mon CSS

body {
  margin: 0;
}

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.contain {
  flex-grow: 1;
  display: flex;
}

.rectangle1 {
  flex-grow: 1;
  background-color: red;
  background: url("./image.png") center center no-repeat;
}
.rectangle2 {
  background-color: green;
  width: 800px;
}

.rectangle3 {
  flex-grow: 0;
  background-color: blue;
  width: 100%;
  height: 90px;
}

Je change de méthode. Je supprime l'image du css et je le pace dans le html

Html

<div class="rectangle1">
    <img src="./image.png" alt="" srcset="" />
</div>

Plus rien ne marche ....

  • Plus de footer
  • lors que je redimensionne, le width du rectangle 2 n'est plus constant... il va de 800px à 0px
  • l'image ne se redimensionne plus...

je sèche ....

Merci d'avance pour vos solutions.

Aucune réponse