0
votes

Comment rendre l'image rester à l'intérieur du conteneur sans être débordé

L'image à l'intérieur du conteneur est débordée même après avoir donné Overflow: caché code> au conteneur.

Cela ne se produit pas du tout et cela ne devrait pas arriver après avoir donné Overflow : caché code>, mais il bugs toujours pour une raison quelconque p>

toute aide serait appréciée. p>

image p>

 Entrez la description de l'image ici p>

HTML: P>

.brands {
  margin-top: 18px;
  border: 1px solid silver;
  height: 200px;
  margin-bottom: 25px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


0 commentaires

3 Réponses :


0
votes

.brands 
{
...
clip-path: rectangle(0, 0, 100%, 200px);
}


0 commentaires

1
votes

J'ai essayé de recréer votre problème: codesandbox Tout semble fonctionner comme prévu, alors je pense que cela pourrait être un navigateur. Ce problème se produit-il sur chaque navigateur? Avez-vous mis la page votre page (zoom)?


1 commentaires

Je pense que c'est la question du navigateur alors, cuz lorsque je zoomez du navigateur, c'est à ce moment-là que le problème se produit. Merci pour ton aide



0
votes

Donnez votre img max-largeur: 100%; et Hauteur: auto; ou si vous utilisez bootstrap < / Code> Donnez-lui une classe de img-sensible ou img-fluide en fonction de votre version.


0 commentaires