img dépasse de son conteneur

11 septembre 2022 à 14:44:09

Bonjour je suis sur mon premier site responsive. Soyez s'il vous plait indulgent.

Je ne comprends pas. L'img rajouter en html ne se contient pas dans ses conteneurs parent qui eux, ont une heigt plus petite.

Comment est-ce possible ? Et comment remédier à ça ?

AbcAbc6

11 septembre 2022 à 14:47:59

Bonjour, sans ton code on ne peut rien dire.

Si tu as utilisé height pour fixé la hauteur ce n'est pas une bonne chose, utilise min-height ou max-height pour que le design s'adapte au contenu variable.

-
Edité par AbcAbc6 11 septembre 2022 à 14:49:07

BrendanKeenan1

11 septembre 2022 à 15:11:21

     <body>
 <section class="toutesection">
        <div class="contenusection">
        <div id="contenuarticlesection4">
<article id="articlesection4">
           <h1>Démarche</h1> 
  <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec
            sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus.
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Duis vel enim mi, in lobortis sem.
            Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis.
            Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam.
            Maecenas non odio ipsum, a elementum nisi.
          </p>
          
          <div id="banniere" >
       <img src="images/banniere.png" alt="banniere">
        </div> 
        </article>
          </ul>
        </aside>
        </div>
</div>
</div>
</section>
</body>

body {
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: black;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

#bloc_page {
  width: 100%;
  margin: auto;
}

@media all and (min-width: 1024px) {
  
  .contenusection {
    margin-left: 8vw;
    margin-right: 8vw;
  }
  section {
    height: 100vh;
    width: 100%;
  }
  }


.toutesection {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#contenuarticlesection4 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.toutesection article {
  width: 50%;
}
#articlesection4 {
  width: 100%;
}

#contenuarticlesection4 img {
  width: 100%;
  height: auto;
}
aside {
  text-align: justify;
}
#banniere {
  border: solid #1900ff;
  height: 200px;
}

Si vous voulez d'autre précision, je suis là !

Merci pour ta réponse Abc6 !

-
Edité par BrendanKeenan1 11 septembre 2022 à 15:15:38

AbcAbc6

11 septembre 2022 à 19:21:11

Bonjour, indente ton code, ce sera plus facile pour te relire et également pour ceux qui te lisent.

Passe ton code HTML au validateur pour voir et corriger tes erreurs => https://validator.w3.org/

Tu as un </ul> qui n'a rien à faire la, une fermeture de <div> en trop et </aside> que l'on se demande d’où il sort.

Place les media queries en fin de fichier, ce sera plus claire à la lecture du fichier mais surtout si tu redéfinis par la suite un sélecteur déjà défini dans la media queries tel qu'écrit la tu écrasera le sélecteur définis dans la media queries.

L’attribut alt de la balise <img> sert à indiquer une description de l'image dans le cas ou elle n'est pas affichée pour x raisons, et est utilisée par les moteur de recherche et est utilisée par les lecteur d'écran des personnes mal voyantes. Pour ces dernières imagine la synthèse vocal dire "Bannière"!!! Aucun intérêt, indique une vrai description de l'image tel que tu la décrirais à une personne aveugle.

Lire : http://www.pompage.net/traduction/Bien-utiliser-le-texte-alternatif

Pour le problème qui nous occupe, je n'ai pas l'image donc je ne connais pas ses dimensions, comme indiqué plus haut le conteneur de l'image ne devrais pas avoir de hauteur définie avec la propriété height, au pire un min-height au mieux rien.

-
Edité par AbcAbc6 11 septembre 2022 à 19:24:04

Domi65

11 septembre 2022 à 22:59:16

Bonjour. Pour qu'une image ne déborde pas de son conteneur, que ce soit en largeur ou an hauteur, tu peux lui a appliquer ces deux règles :

max-width:100%;
max-height:100%

Cordialement.

BrendanKeenan1

12 septembre 2022 à 14:48:26

Bien joué ! Merci à vous deux ! Mon image est bien conforme à son conteneur.

Je maîtrise encore mal les échelles en % puisque j'ai maintenant un nouveau problème.

le conteneur (<divid="contenuarticlesection4") ne reste pas dans la section <sectionclass="toutesection"> que je souhaiterais (il dépasse quand la fenêtre est ouvert à sa dimension maximum). Comme vous pouvez le voir cette section est déterminé par un height: 100vh il prendra verticalement toute la taille de la fenêtre. Le problème est que le contenu de cette section dépasse de la limite de sa propre dimension.

J'aimerais que ça ne soit pas le cas.

J'ai essayé une nouvelle fois max-width:100% et max-height:100% et beaucoup d'autres techniques mais cela n'a pas d'impact sur la mise en page.

J'utilise des tailles de police en vmax peut-être est-ce là le problème ?

Y a-t-il un rapport avec overflow ? Je ne pense pas, je ne veux pas un scrool ou autre, je veux juste qu'il ne dépasse pas de son conteneur. Qu'il stop l'agrandissement une fois qu'il a atteint sa dimension maximum de son conteneur.

Avez-vous une solution ?

-
Edité par BrendanKeenan1 12 septembre 2022 à 15:48:26

Domi65

12 septembre 2022 à 15:39:18

« je ne veux pas un scrool ou autre, je veux juste qu'il ne dépasse pas de son conteneur. »

Il n'y a que les pieds de cendrillon qui peuvent entrer dans ses chaussures de vair ! ;-)

BrendanKeenan1

12 septembre 2022 à 15:50:58

Il n'est donc pas possible de contenir et d'arrêter l'agrandissement dans son conteneur ?

je suis obligé de couper avec overflow: hidden (ce n'est pas ce que je souhaite) ou alors il faut que je diminue l'intérieur, le contenu.

BrendanKeenan1

14 septembre 2022 à 11:01:45

Je n'aurais donc pas d'aide sur ce sujet.

Je pense que personne ne répond à ma question parce que c'est tout simplement pas possible avec vh.

J'ai échangé avec d'autres dev et ils m'ont répondu que en général vh et vw posent problème..

Je dois tout repensé pour mon site, à moins que vous ayez une solution.

On m'a plutôt conseillé d'utiliser grow et shrink. Si ça peut aider d'autre personne qui rencontre le même problème.

Qu'est-ce que vous en pensez ? Y a-t-il une alternative a vh tout en ayant le même résultat ?

-
Edité par BrendanKeenan1 14 septembre 2022 à 11:05:10

AbcAbc6

15 septembre 2022 à 19:21:31

Bonjour,

>> Je n'aurais donc pas d'aide sur ce sujet.

Je ne suis pas d'accord, vous avez reçu de l'aide, le fait que cela ne fonctionne pas comme vous le souhaitez n'a rien avoir avec l'aide reçue.

Je viens de voir votre sujet sur le forum alsacreations, le code que vous y donnez n'est pas le même que sur ce sujet. Après avoir placé une image de 700*700 dans votre code, je constate que l'image s'adapte bien au conteneur (l'image s'agrandit si la fenêtre est plein écran, et l'image s'adapte rétréci sans déborder de son conteneur si on rétréci la fenêtre).

J'ai bien évidement corriger les sélecteurs d'identifiant qui ne sont pas correct.

Pourriez vous poster une page en ligne, compète image comprise, pour que l'on puisse y voir plus clair dans l'ensemble du code et le comportement que vous illustrez par vos captures écrans.

-
Edité par AbcAbc6 15 septembre 2022 à 19:23:10