28172 sujets

CSS et mise en forme, CSS3

Img et %

Bonjour

Lorsque je définis une taille en % pour mes images dans mon css, par exemple width:50%, est ce que les images s'affichent à 50% de leur taille ou sur 50% de la div qui les porte ?

J'ai du mal à comprendre, mes images ont toutes une taille différente à l'origine, et lorsque je les définis à 50%, elles font alors toutes la même largeur. Or elles devraient juste être à la moitié de leur taille et avoir une largeur différente entre elles.
Modifié par Benoit / (25 Aug 2017 - 21:56)
oui les largeurs sont les même puisque width=largeur puis quand tu met 50% c'est 50% du conteneur sauf erreur de ma part.
Modifié par Integrator (25 Aug 2017 - 22:01)
Est il possible alors que définir les images à 50% de leur taille réelle ?
Est il possible EN PLUS qu'elles se redimensionnent en fonction de la taille de leur conteneur ?
Est il possible alors que définir les images à 50% de leur taille réelle ?

Oui en indiquant la taille en pixel et non en pourcentage. ( il me semble )

Est il possible EN PLUS qu'elles se redimensionnent en fonction de la taille de leur conteneur ?

Oui en restant en pourcentage dans un conteneur flexible.
Euh ok mais je ne vais pas m'amuser à mettre une taille en pixels différente pour chacune de mes images. Cela n'a pas de sens.
Sur mon blog, chaque article comporte beaucoup d'images. J'aimerais à la fois que mes images n'aient jamais la même hauteur ou la même largeur (identiques entre elles) - car à l'origine elles n'ont justement pas la même hauteur ni la même largeur -, et j'aimerais que mon blog soit tout de même responsive, c'est à dire que lorsque la taille de l'écran diminue, les images se réduisent également.

Ce qui me gène lorsqu'on définit une taille pixels ou pourcentage, c'est que les images se retrouvent toutes avec soit la même hauteur, soit la même largeur.

Comme il y a beaucoup d'images, je ne peux pas attribuer à chacune une taille différente, cela prendrait un temps fou en plus de ne pas être logique.
Modifié par Benoit / (25 Aug 2017 - 23:38)
On peut faire cela en ajoutant, en plus des règles pour le responsive, une règle max-width. Exemple pour une image comportant le mot clef "thumbnail" quelque part dans une de ses classes :
[class*="thumbnail"] {
      max-width: 100%; // edit, valeur rectifiée après le post de Raphaël, je me suis effectivement trompé...
}

Exemple en ligne (en fin de page) : Scriptura, Images
Modifié par Olivier C (26 Aug 2017 - 14:34)
Administrateur
Hello,
Benoit / a écrit :
Est il possible alors que définir les images à 50% de leur taille réelle ?


img {transform: scale(.5);}


Benoit / a écrit :
Est il possible EN PLUS qu'elles se redimensionnent en fonction de la taille de leur conteneur ?


img {max-width: 100%}
Merci Olivier, ton exemple (surtout les deux images vertes en bas) est exactement ce que je veux faire. Comment puis je faire cela ?

Donc : 2 images de taille différente qui s'affichent justement en deux tailles différentes (non parce que c'est défini, mais parce qu'elles le sont), et une redimension en fonction de la taille de la fenêtre.
Et ça chasse le contenu autour... comme si l'image était entouré d'une marge.
Dans ton exemple, la seconde image est bien réduite, mais décalée par rapport à la première et le contenu suivant sera lui aussi décalé.
Modifié par Benoit / (27 Aug 2017 - 00:54)
Sujet clos
Aller à