28172 sujets

CSS et mise en forme, CSS3

[Résolu] Une image qui déborde ... snif !

Bonjour à tous,

Voici mon tit'problème ...

<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-8">

  <title>une image qui déborde</title>

  <style media="screen">
  	body{background-color: #84815b;}
        p{background-color: #adcf4f; width:300px;}
  </style>
</head>
<body>

<p>une image "width= 400px" dans un paragraphe "width= 300px" <img src="img/obelix.jpeg" style="width:400px;"> et on voit que l'image dépasse ... normal !</p>

</body>
</html>


upload/42197-Capture-1.jpg 


<p>la même image et configurée avec la propriété "max-width=100%" <img src="img/obelix.jpeg" style="max-width:100%"> et on voit qu'elle ne dépasse plus ... cool !</p>


upload/42197-Capture-2.jpg 


<p>toujours la même image avec les propriétés "border:20px solid #8e3557; max-width= 100%;" <img src="img/obelix.jpeg" style="border:20px solid #8e3557; max-width:100%"> et là elle dépasse de 2x l'épaisseur du border ... snif !</p>


upload/42197-Capture-3.jpg


Question: comment faire pour que cette image avec sa bordure ne dépasse pas du paragraphe ?

Je bute sur ce tit'problème ... qui pourra peut-être paraitre évident pour certains d'entre vous ... je sollicite votre aide et par avance merci pour toutes vos futures réponses.
Bonjour,

si la largeur de ton contenant est fixe pas de problème tu mets en dur la largeur de ton image à 300-2*20=260px
sinon il y aurait la propriété calc de firefox mais elle n’est pas compatible avec les autres navigateurs.

Pour t’en sortir tu pourrais appliquer la bordure non pas à l’image mais à une div l’englobant comme ceci :
<div style="width:300px">
<p>toujours la même image avec les propriétés "border:20px solid #8e3557; max-width= 100%;" <div style="border:20px solid #8e3557; "><img src="test.jpg" style="max-width:100%"></div> et là elle dépasse de 2x l'épaisseur du border ... snif !</p>
</div>
Merci à vous deux, adrien881 et Gothor

... mais c'est Gothor qui gagne sur ce coup là, c'est effectivement la réponse que j'attendais !

Je ne connaissais pas la propriété:
box-sizing: border-box;

J'avais également le même problème dans mon formulaire de contact sur un textarea.
Je suis content de connaitre cette nouvelle solution ...
Hello,

A titre préventif, je rajoute que ce n'est utilisable que pour IE>7 et qu'il faut tout de même le préfixer pour Firefox Smiley cligne

Source
Administrateur
Si si ça fonctionne sur IE6 et IE7 ... sans Doctype, en Quirks mode. WE ARE DOOMED

Smiley lol

Sinon un lien qui pourrait se révéler utile sur la valeur la plus utile de width et qui est ... auto ! Et pas 100% la plupart du temps (je n'ai pas pris le temps de regarder si ça s'appliquait aux exemples de tes images, désolé, mais ça reste bon à savoir en général)
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
Felipe a écrit :
Si si ça fonctionne sur IE6 et IE7 ... sans Doctype, en Quirks mode. WE ARE DOOMED

Alors là, ça me la coupe Smiley eek on en apprend tous les jours Smiley biggol

Bien d'accord avec toi pour auto, j'ai mis longtemps avant de me passer des 100%.
... je ne suis pas un habitué des forums en général, mais je suis agréablement surpris par l'aide que je peux trouver chez alsacreations ... encore merci à vous tous pour vos réponses
Je viens de faire un essais en attribuant max-width:auto; comme le suggérait Felipe ...
Mais appliqué sur une balise img, l'image prend sa largeur maximale ... même si son conteneur est moins large !

Avec max-width:100%; l'image est redimensionnée à la même largeur que son conteneur.

Voili voilà ...
Sujet clos
Aller à