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

french-petzouille · 29 Novembre 2005

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

TibomonG4 · 29 Novembre 2005

Bonsoir

Petite lecture

macmarco · 29 Novembre 2005

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 · 29 Novembre 2005

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 · 29 Novembre 2005

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 · 29 Novembre 2005

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

Nephou · 30 Novembre 2005

Je croyais que Safari supportait ces propriétés.

momo-fr · 30 Novembre 2005

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 ?

Nephou · 30 Novembre 2005

ben ce qu'il veut demande surtout un support des css-3 qui est encore très partiel (Opéra pour ceci, le webkit pour cela, Firefox pour d'autres et IE pour rien)

Niconemo · 1 Décembre 2005

il parait que la version 7 de IE va peut-être interpréter presque tout le CSS 2

... 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 · 1 Décembre 2005

Niconemo a dit:
il parait que la version 7 de IE va peut-être interpréter presque tout le CSS 2 ... 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 · 1 Décembre 2005

[ 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 · 1 Décembre 2005

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...

Niconemo · 3 Décembre 2005

Tiens j'ai déjà vu ce dodo quelque part !

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

french-petzouille

Membre confirmé

TibomonG4

Membre vénérable

macmarco

Membre vénérable

french-petzouille

Membre confirmé

Nephou

de pas sage

french-petzouille

Membre confirmé

Nephou

de pas sage

momo-fr

Ancien Aveyronnais

Nephou

de pas sage

Niconemo

Modo (toujours vivant !)

fredmac75

Membre expert

Niconemo

Modo (toujours vivant !)

fredmac75

Membre expert

Niconemo

Modo (toujours vivant !)

Sujets similaires