28118 sujets

CSS et mise en forme, CSS3

[Résolu] max-width et fonctionnalitées

Bonjour à tous,

Je viens de revoir les propriétés "max-width" et "min-width" qui peuvent avoir leur petite utilité dans les design fluides.
En gros on peut arrêter l'agrandissement de l'image, quand celui-ci attend une valeur donnée (par ex: 500px).

Pour ma part j'aimerai savoir si il y a un moyen (dans le css) de définir la valeur maximale par la largeur initiale de l'image, et que cette propriéré s'adapte pour n'importe quelle image, quelle que soit sa largeur.

Je ne suis pas sûr d'être clair malheureusement
Pour simplifier on aurait un sorte de:



#content img
{
	width:100%;
	max-width: "largeur de l'image";
}


Dans cet exemple (faux):
Le max-width serait égal à 400px; pour une image de 400px de large.
Et le même code donnerait 600px; pour une image de 600px de large.

Si c'est réalisable comment doit-on le rédiger?
Sinon existe-t-il une autre manière de procéder?
Modifié par adoptme (02 Feb 2007 - 18:40)
Le but est de réduire la largeur de l'image si le conteneur est trop étroit, mais de lui laisser prendre sa largeur normale autrement ?

#content img {
	max-width: 100%;
}

Pas testé, mais théoriquement ça devrait marcher.
Mais bien sûr,

Pourquoi je n'avais pas essayer ça? C'est tellement simple!
Grands Dieux, j'adore le CSS!

Merci beaucoup pour ton aide.
Bonsoir,

La valeur de max-width n'est pas relative à la largeur intrinsèque de l'image, mais à celle d'un bloc de la page.

En d'autres termes, ce n'est pas possible sous cette forme.

Tout au plus peut-on définit simplement des classes par taille d'image:


img.w400 {
max-width: 400px;
}
img.w600 {
max-width: 600px;
}
...


Cela dit, les images redimensionnées côté client... bof bof bof côté qualité et robustesse du design et du contenu Smiley cligne
Modifié par Laurent Denis (30 Jan 2007 - 22:40)
Autre chose,

J'ai cru comprendre que "max-width" n'était pas interpreté par Explorer (pour changer).

C'est le cas?
adoptme a écrit :
J'ai cru comprendre que "max-width" n'était pas interpreté par Explorer (pour changer).

Explorer, l'explorateur de fichiers de Windows, n'est de toute façon pas beaucoup utilisé pour visualiser des pages web. Internet Explorer, par contre, comprend max-width, mais uniquement depuis sa version 7.

Si tu connais à l'avance la largeur du conteneur, taille tes images à l'avance. Le max-width appliqué à une image ne sera intéressant que comme effet esthétique facultatif, pour éviter qu'une image un peu trop grande ne dépasse du conteneur. Il faudra prévoir le dépassement sous IE 6, et y pourvoir (peut-être utiliser un overflow: hidden ou overflow: auto si besoin).

Mais si le but est de redimensionner des images de 900px de large pour qu'elles ne dépassent pas d'un bloc large de 300px, ça n'est clairement pas un bon plan.
Pardon Smiley ravi je ne suis par entièrement familié à l'univers Microsoft
Un moyen de contourner ça?
Smiley ohwell
Modifié par adoptme (30 Jan 2007 - 22:53)
adoptme a écrit :
Un moyen de contourner ça?
Smiley ohwell

Un truc simple, pas prise de tête et fiable ? Non.

Quel est le besoin en pratique ? Parce qu'il ne faudrait pas se mettre martel en tête pour pas grand chose, ou partir sur une « solution » sans savoir si c'est vraiment utile/efficace.
En 2 mots,

J'ai crée un Blog avec Plume-CMS pour mon groupe d'amis.
Mes amis peuvent rédiger un article et y ajouter une photo, mais ne savent pas nécessairement comment faire pour redimmensionner une image.

Hors le template principal de plume comporte un bug; le design est fluide, la partie centrale qui comporte les nouvelles s'agrandit et se réduit en fonction de la largeur de la fenêtre.
Le texte à l'interieur des articles diminue donc de longueur, mais si la largeur de cette colonne est inférieure à la largeur de l'image: le texte dépasse par la droite.
En gros la largeur minimale pour que le texte d'un article ne déborde pas est celle de l'image la plus large de cet article!

Je pensais que la solution du "max-height" était à la fois un bon moyen de contourner ce bug et aussi une bonne solution pour que mes amis puisse voir nos photos dans des dimensions pas trop énormes
Modifié par adoptme (31 Jan 2007 - 00:27)
adoptme a écrit :
Mes amis peuvent rédiger un article et y ajouter une photo, mais ne savent pas nécessairement comment faire pour redimensionner une image.

Mouais, ça confirme mes doutes. Si tu mets en place un redimensionnement des images côté client, tu vas avoir au final des photos en JPEG peu compresssé, 4 Mégapixels voire 10 Mégapixels (bref direct sortant de l'appareil numérique), mises en lignes joyeusement par des amis disposant d'une connexion ADSL rapide... et ne pensant deux secondes à ce que ça implique pour les autres visiteurs.

Je crois que ça devra nécessairement passer par un peu d'éducation des amis en question (oui je sais, c'est pas facile... mais on peut commencer par leur indiquer des dimensions de référence -- largeur maximale en pixels, par exemple). Ou alors : mettre en place un système de redimensionnement des images côté serveur (lors de la mise en ligne par un rédacteur). Mais PlumeCMS ne le propose pas, et je ne crois pas qu'il y ait d'extension le permettant...
Modifié par Florent V. (31 Jan 2007 - 02:35)
Tu as raison, Plume ne propose aucune compression et je n'ai trouvé aucun plugin.
Pour les autres visiteurs; il n'y en a pas. Le blog est protégé, seul les rédacteurs y ont accès.

J'ai trouvé un site qui propose des compressions en ligne (qualité et dimensions) ImageSquash

Je leur apprendrai à utiliser une largeur maximale de 500 px, ça résout déjà un problème: celui des images très larges pour être affichée en entier.

Un autre problème persite; si la colone centrale (celle des articles) fait moins de 500px (ce qui est problable avec un moniteur plus petit que 1024, ou une fenêtre retrécie), alors le texte continue à déborder sur la droite.

J'avoue que maintenant ce problème n'est plus vraiment invivable, ce blog n'est pas destiné au grand public et un petit bug de ce style ne gêne pas vraiment la lisibilité. De plus j'ose espèrer que IE7 comprend les "max-width"

Le regler aura pour utilité de combler ma curiosité et faire un petit pas de plus dans ma connaissance du CSS
Modifié par adoptme (31 Jan 2007 - 02:57)
Pas mal du tout ton script,

mais jai heureusement trouver une solution qui me convient...
Changer de CMS; Plume est excellent pour sa simplicité mais celle-ci implique moin de fonctionnalités.
J'ai trouvé un bon compromis dans le rapport fonction/simplicité, il s'appelle WordPress à condition qu'on lui ajout le plugin ImageManager qui est vraiment parfait. (une animation flash vous montrera ses capacités)
Ce plugin permet de uploader, recadrer, compresser, retrecir (etc) n'importe qu'elle image directement depius l'interface administrateur de WordPress. Et si on l'ajoute avec la version de JS - Lightbox conçue pour lui, on peut utiliser le lightbox sans aucune connaissance en programmation!!! parfait pour mes amis.

Merci à tous de votre aide.
Pierre
Sujet clos
Aller à