Sujets similaires

Bonjour ! Voilà, je vous explique mon problème en essayant d'être la plus claire possible. J'ai installé un code css en div dans ma page css afin de donner un contour aux photos portant le div. Seul hic, le contour ne s'adapte pas à la taille de l'image ! Je m'explique. Si par exemple dans une même page, j'ai une image de largeur 640 et une de largeur 400, et bien l'image de 400 va se retrouver sans sa bordure, cette dernière prenant automatiquement la largeur de 640 (elle ne sera donc pas collée à l'image, et c'est moche). Voici mon code css, si cela peut vous aider :

.photo{
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
border: 5px solid #BA9D94;
}

Je souhaiterai donc rendre cette bordure "adaptable" à l'image qu'elle contient. Je remercie d'avance eux d'entre vous qui pourront m'aider

.

Bonjour, une div prend automatiquement toute la largeur de la page. Donc il faudra que tu rajoutes la largeur de ton image pour que cela s'adapte.

Comme ceci :

Code:: <div class="photo" style="width: TAILLEpx;"><img src="LIEN"></div>

D'accord, merci beaucoup ! Il faut donc ajouter cela pour toutes les photos ? Cela ne peut pas être uniquement contrôlé par la page CSS ?

Malheureusement non. A moins de créer à chaque fois une classe différente selon la hauteur de l'image.

Par exemple pour une image de 500px de largeur :

Code:: .photo{
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
border: 5px solid #BA9D94;
width: 500px;
}

et donc HTML :

Pour une image de 600px de largeur :

Code:: .photo1{
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
border: 5px solid #BA9D94;
width: 600px;
}

et donc HTML :