CSS: Adaptation AUTO de la taille de l'image au BLOCK

french-petzouille

Membre junior
8 Octobre 2001
86
0
Rodez
j'm'en sort pas !
alors ... je compte sur vous :

soit ce bout de code html

Citation : extrait du code
Bloc de code:
... 
</head> 
<body> 
<div id="mon_image" > 
<!-- on met ici le LOGO --> 
</div>


et soit ce bout de CSS:
Bloc de code:
div#mon_image 
{ 
background:url(Resources/mon_logo.jpg); 
border:1px solid #C00;position:absolute; width:222px; top:34px; right:10%; height:222px;
}

Vous avez reconnu un Block de 222 px sur 222px dans lequel je met une image : mon_image .jpg. :)


COMMENT signifier A MEME MA feuille de STYLE .. de mettre à la dimension du BLOCK l'image passée en paramètre dans background:url(...);

AUTREMENT DIT ... si mon image est plus GROSSE que le bloc je voudrait qu'elle soit redimentionner de facon AUTOMATIQUE . POUR EVITER LE RECOURS SYSTEMATIQUE A UN EDITEUR d'IMAGES ...

je SECHE +++ ?
Peut-on avoir cela en CSS PUR comme on l'a avec le Html les et options Width et height de la balise <img> ???
merci les moins mauvais que moi :)
 

macmarco

Vénérable sage
Club MacG
25 Juillet 2002
11 068
4 026
52
Rennes
french-petzouille a dit:
AUTREMENT DIT ... si mon image est plus GROSSE que le bloc je voudrait qu'elle soit redimentionner de facon AUTOMATIQUE . POUR EVITER LE RECOURS SYSTEMATIQUE A UN EDITEUR d'IMAGES ...

Petite remarque : ton image est peut-être redimensionnée à l'affichage, mais pas au chargement, d'où le risque de lenteur de chargement de la page.
Maintenant, c'est un choix, ici, celui de la facilité, mais ça peut décourager les visiteurs avec une "petite" connexion. ;)
 

french-petzouille

Membre junior
8 Octobre 2001
86
0
Rodez
POUR TIBOMON

j'ai lu avec interet cet article de ALSACREATION.

la seule chose qui ne colle pas est que le code HTML comporte la balise IMAGE
<img id="arriere" alt="" src="araignees.jpg" />


Or ... je voulait savoir si on pouvait faire cela en DEPORTANT TOUT LE CODE dans une FEUILLE DE STYLE . TOUT LE CODE = le chemin d'accès au fichier image:

avoir un html du genre:
Bloc de code:
 <div id="arriere" >
<!-- ici sera mon image designée par ma CSS -->
</div>

et non ce qui est proposée:
Bloc de code:
<div>
<img id="arriere" alt="" src="araignees.jpg" />
</div>

Ainsi ... je change TOUT depuis la CSS et non en devant aussi changer le chemin dans le fichier HTML. .. surtout si j'ai des images nombreuses sur plusieurs pages differentes.

TOUT MAITRISER DEPUIS LA CSS : LE NOM et la TAILLE qui s'adapte au BLOC PARENT.
C'est peut-être pas FAISABLE avec CSS 2 ??
:)
 

Nephou

au début de la fin
Modérateur
Club MacG
24 Avril 2001
8 129
1 542
Deux-Sèvres
www.nulle-part.fr
Ce n'est pas possible. Une image de fond ne peut avoir comme paramètre que ceux de sa répétion (axe vertical, axe horizontal, les deux ou aucun) et sa position en abcsisses et ordonnées.


c'est tout... il va te falloir attendre que tous les navigateurs supportent le css3 ou faire ton site uniquement pour Safari ;)


en attendant redimensionne tes imageshttp://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size
 

french-petzouille

Membre junior
8 Octobre 2001
86
0
Rodez
Nephou a dit:
Ce n'est pas possible. Une image de fond ne peut avoir comme paramètre que ceux de sa répétion (axe vertical, axe horizontal, les deux ou aucun) et sa position en abcsisses et ordonnées.


c'est tout... il va te falloir attendre que tous les navigateurs supportent le css3 ou faire ton site uniquement pour Safari ;)


---> PArce que SAFARI interprete le CSS 3 ??

etrange car la propriété "background-size: 100%;" ne prend pas une couleur specifique comme les autres propriétés ( coloré en bleu ) dans TextWrangler ...

Elle ne semble pas reconnu par lui et ne donne rien dans safari :mad:
 

momo-fr

Ancien Aveyronnais
Club MacG
4 Octobre 2004
4 725
1 851
Bordeaux (33)
www.momofr.net
Il y a un truc que je ne saisie pas, tu utilise du Php derrière où quoi ?

La fonction background ne permet que d'afficher une image, elle n'agit pas sur le contenant qui lui a ses propres paramètres. Ce que tu veux demande une interprétation avec un langage de commande, Javascript, Php, Asp, par exemple... ou je délire ? :eek:
 

Niconemo

Modo (toujours vivant !)
Club MacG
26 Juin 2001
6 449
458
Rhône-Alpes
il parait que la version 7 de IE va peut-être interpréter presque tout le CSS 2 :rolleyes: ... Mais ils attendent un peu pour sortir... que les autres soient passés au CSS 3 peut-être. Quand on une réputation à chier, ça a au moins le mérite de faire parler de soi.

Désolé j'enfonce des portes ouvertes (et d'être complètement HS en plus) mais ça défoule ! Je viens encore de passer 3 jours à déboguer un design que j'avais mis un seul jour à faire pour tous les autres navigateurs... Au lieu de faire des système avec des noms de vache on devrait peut être dépenser un petit pourcentage des bénéfices à payer 2 ou 3 programmeurs chez Billou. Quand on y réfléchit : c'est incoyable les millions d'heures de travail qui sont dépensées quotidiennement en déboguage dans le monde entier pour le compte de Krosoft ! On devrait tous leur envoyer la facture pour chaque site débogué.

Pour le reste, je ne m'orienterai pas vers une solution CSS, mais plutôt vers une solution en amont sur les images : en PHP ou avant le chargement (script de dossier, automator, action photoshop, etc.).

Une solution pourrait être de superposer des divisions contenant des images normales (pas en image de fond) et là on peur déformer à la volée. Mais c'est du bricolage (même si j'avoue l'avoir déjà fait).
 

fredmac75

Membre d’élite
Club MacG
14 Juillet 2003
1 415
127
50
Le Mans
www.km-spirit.com
Niconemo a dit:
il parait que la version 7 de IE va peut-être interpréter presque tout le CSS 2 :rolleyes: ... Mais ils attendent un peu pour sortir... que les autres soient passés au CSS 3 peut-être. Quand on une réputation à chier, ça a au moins le mérite de faire parler de soi.

Désolé j'enfonce des portes ouvertes (et d'être complètement HS en plus) mais ça défoule ! Je viens encore de passer 3 jours à déboguer un design que j'avais mis un seul jour à faire pour tous les autres navigateurs... Au lieu de faire des système avec des noms de vache on devrait peut être dépenser un petit pourcentage des bénéfices à payer 2 ou 3 programmeurs chez Billou. Quand on y réfléchit : c'est incoyable les millions d'heures de travail qui sont dépensées quotidiennement en déboguage dans le monde entier pour le compte de Krosoft ! On devrait tous leur envoyer la facture pour chaque site débogué.

Pour le reste, je ne m'orienterai pas vers une solution CSS, mais plutôt vers une solution en amont sur les images : en PHP ou avant le chargement (script de dossier, automator, action photoshop, etc.).

Une solution pourrait être de superposer des divisions contenant des images normales (pas en image de fond) et là on peur déformer à la volée. Mais c'est du bricolage (même si j'avoue l'avoir déjà fait).

Tout à fait exacte, néanmoins le principe ne réalité ne s'impose t-il pas à nous ? la plupart des internautes utilise IE (quelqu'en soient les raisons), et ce alors même que FF tant à prendre plus d'importance... Donc développer un site sous IE, et ce quelqu'en soient les difficultés, restent le pain quotidien de nombreux webmasters.
;)
 

Niconemo

Modo (toujours vivant !)
Club MacG
26 Juin 2001
6 449
458
Rhône-Alpes
[ Ben oui mais c'est bien ça le problème ;)
Je débogue bien-sur tous mes sites pour explorer 6 et je le ferai, comme je le fais pour Safari, tant que ce navigateur représentera plusieurs % de parts d'utilisation par respect pour les clients et les internautes (sauf 1 seul de mes propres sites que j'ai badgé "too cool for explorer"). Il n'en demeure pas moins que la situation est injuste et immorale.

Mais j'arrête de squatter ce sujet avec ça... ]
 

fredmac75

Membre d’élite
Club MacG
14 Juillet 2003
1 415
127
50
Le Mans
www.km-spirit.com
Niconemo a dit:
[ Ben oui mais c'est bien ça le problème ;)
Je débogue bien-sur tous mes sites pour explorer 6 et je le ferai, comme je le fais pour Safari, tant que ce navigateur représentera plusieurs % de parts d'utilisation par respect pour les clients et les internautes (sauf 1 seul de mes propres sites que j'ai badgé "too cool for explorer"). Il n'en demeure pas moins que la situation est injuste et immorale.

Mais j'arrête de squatter ce sujet avec ça... ]
tient rien que pour toi, voilà l'instant détente : http://www.lespetitescases.net/l-affaire-jane-eyre (l'image est intéressante).
Peut être devrais tu demander des royalties...