28172 sujets

CSS et mise en forme, CSS3

Contrôle des tailles d'images en CSS

Je cherche un document qui fasse le point sur le contrôle des tailles d'images en CSS.

Quand on écrit
<div id="conteneur"><img src="mon_image.jpg"></div>

et
#conteneur img{max-width:20%;}

la largeur effective de l'image est le minimum entre la largeur définie dans le fichier mon_image.jpg et 20% de la largeur de "conteneur".
Mais est-il possible de définir par CSS une formule un peu plus complexe, par exemple faire en sorte que la largeur effective soit le minimum entre 80% de la largeur définie dans le fichier mon_image.jpg et 20% de la largeur de "conteneur"?
Actuellement je ne connais pas d'autre moyen pour obtenir ce résultat que de passer par du JavaScript et générer en dur un attribut du genre style="width:123px;" dans la balise <img>, ce qui oblige à lancer un script au redimensionnement de la fenêtre ou au changement d'orientation de l'écran.

Votre avis m'intéresse!
Modifié par PapyJP (09 Dec 2016 - 10:56)
PapyJP a écrit :
Est-il possible de [...] faire en sorte que la largeur effective soit le minimum entre 80% de la largeur définie dans le fichier mon_image.jpg et 20% de la largeur de "conteneur"?

Je ne suis pas sûr de comprendre l'énoncé... le minimum doit donc être 20% de la taille du conteneur, mais au moins 80% de la largeur de l'image ?
Modérateur
Salut,


PapyJP a écrit :
le minimum entre 80% de la largeur définie dans le fichier mon_image.jpg et 20% de la largeur de "conteneur"

C'est à dire 20% du conteneur mais jamais plus de 80% de sa propre taille ? Pourquoi restreindre la taille de ses images à seulement 80% ? C'est étrange de ne pas afficher ses images à la résolution normale...

Il n'y a pas grand chose en css pour dire "80% de sa propre taille" à part transform:scale(0.8); (mais c'est juste visuel la place occupée reste la meme);
_laurent a écrit :
Salut,
C'est à dire 20% du conteneur mais jamais plus de 80% de sa propre taille ? Pourquoi restreindre la taille de ses images à seulement 80% ? C'est étrange de ne pas afficher ses images à la résolution normale...

Que ça ne serve à rien tel que je l'ai énoncé, j'en suis bien d'accord. Ce que je veux simplement comprendre, c'est comment prendre en compte les paramètre de taille de l'image et les combiner avec les paramètres de taille du conteneur.
Dans le temps, on utilisait <img width="80%" ...>, ça voulait dire 80% de la largeur de l'image.
Maintenant quand on applique du CSS à une image, par exemple <img style="width:20%" ...> ça veut dire 20% de la largeur de son conteneur. Pour des raisons de compatibilité, je suppose que <img width="80%" style="widh:20%" ...> doit être accepté, mais je n'ai pas regardé ce qu'une telle salade allait donner.
_laurent a écrit :
Il n'y a pas grand chose en css pour dire "80% de sa propre taille" à part transform:scale(0.8); (mais c'est juste visuel la place occupée reste la meme);

C'est bien ce que je pensais, mais que se passe-t-il si on met un tansform:scale et un width sur la même image?
Tu me diras que je peux bien entendu faire des essais, ce que je cherche c'est un document qui explique comment c'est sensé fonctionner. Si je fais des essais, c'est purement expérimental, ça n'explique rien du fonctionnement.
Modifié par PapyJP (09 Dec 2016 - 12:04)
Modérateur
PapyJP a écrit :

C'est bien ce que je pensais, mais que se passe-t-il si on met un tansform:scale et un width sur la même image?

Selon la doc: (https://www.w3.org/TR/css-transforms-1/#module-interactions)
a écrit :
This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

Autrement dit, width sera appliqué, les éléments de la page dimensionnés et positionnés, et ensuite seulement la transformation sera appliquée sans perturber la mise-en-page.

PapyJP a écrit :
Ce que je veux simplement comprendre, c'est comment prendre en compte les paramètre de taille de l'image et les combiner avec les paramètres de taille du conteneur.

Il y a bien des astuces pour certains cas, mais dans ce cas précis on ne peut pas, sans recourir à un autre language (serveur ou javascript).
Administrateur
PapyJP a écrit :
Dans le temps, on utilisait &lt;img width="80%" ...&gt;, ça voulait dire 80% de la largeur de l'image.

Hello,

Rien ne t'empêche de le faire encore aujourd'hui : les attributs width et height sont parfaitement autorisés sur des images.
Raphael a écrit :

Hello,

Rien ne t'empêche de le faire encore aujourd'hui : les attributs width et height sont parfaitement autorisés sur des images.

Oui, mais à cette époque il n'y avait pas de CSS entrant en compétition avec la balise <img>, d'où ma recherche d'un document qui fasse la synthèse de ce qui est sensé se passer, dans quel ordre c'est sensé se passer, etc.
Modérateur
PapyJP a écrit :
Dans le temps, on utilisait &lt;img width="80%" ...&gt;, ça voulait dire 80% de la largeur de l'image.

Heu... je sais pas si ça a a changé en cours de route (et la route fut longue) mais <img width="80%"> ne veut plus dire ça et prend bien 80% du parent hein, c'est équivalent au CSS.

Ou alors je dis une connerie ? (mais j'ai vérifié à l’instant hein Smiley murf https://jsfiddle.net/Undless/40f0uonj/ )
Modifié par _laurent (09 Dec 2016 - 16:43)
Administrateur
PapyJP a écrit :

Oui, mais à cette époque il n'y avait pas de CSS entrant en compétition avec la balise &lt;img&gt;,.

Si si Smiley smile
Sujet clos
Aller à