Comment remplacer la balise img src width à 100% en CSS? [Fait]

**kunpen** · 27/01/2009, 04h22

Bonjour à toutes et à tous,

Je cherche à changer de thèmes (images, couleurs, dispositions,etc) pour mon site avec du CSS.

Hors, je n'arrive pas à remplacer l'image (960x159) qui fait office de bannière
que j'ai mis en largeur à 100% pour gagner en poid et pour qu'elle s'adapte automatiquement à la résolution du navigateur/écran.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="theme_default.jpg" alt="banner" width="100%" height="159" />

J'ai utilisé en CSS (appelé) 2 exemples pour aller d'un thème à l'autre:
default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#banner {
background:url(bannerdefault.jpg) no-repeat;
border:0
}

blue.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#banner {
background:url(bannerblue.jpg) no-repeat;
border:0
}

J'ai utilisé en HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="nature-theme" href="nature.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="silver-theme" href="silver.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="space-theme" href="space.css" />
<title>Document sans nom</title>
<script type="text/javascript" src="styleswitch.js"></script>
</head>
 
<body>
<a href="javascript:chooseStyle('default', 60)" checked="checked" >thème par default </a>
<a href="javascript:chooseStyle('nature-theme', 60)" >thème nature</a>
<a href="javascript:chooseStyle('silver-theme', 60)" >thème silver</a>
<a href="javascript:chooseStyle('blue-theme', 60)" >thème blue</a>
<a href="javascript:chooseStyle('space-theme', 60)" >thème space</a>
 
Ne fonctionne pas
<img src="theme_default.jpg"     id="banner"      alt="banner" width="100%" height="159" border="0" />
Ne fonctionne pas
<span id="banner"><img src="theme_default.jpg"  alt="banner" width="100%" height="159" border="0" /></span>
Ne fonctionne pas
<div id="banner"><img src="theme_default.jpg" alt="banner" width="100%" height="159" border="0" /></div>
 
</body>
</html>

Pour le script changeur de thèmes, vous pouvez le trouver ici:
http://www.dynamicdrive.com/dynamici...etswitcher.htm

J'ai essayé de nombreuse combinaisons en CSS comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
Ne fonctionne pas
#banner {
background:url(bannerblue.jpg) no-repeat;
position:absolute;
width:100%;
height:159px;
border:0
}
 
Ne fonctionne pas
div#banner {
background:url(bannerblue.jpg) no-repeat;
position:absolute;
width:auto;
height:159px;
border:0
}
 
Ne fonctionne pas
div#banner {
background:url(bannerblue.jpg) no-repeat;
border:0
}
 
ETC....

Bref si il y a une technique qui pourrais afficher mes bannières images
toujours à la même hauteur et une largeur qui s'auto adapte à la largeur de la résolution via CSS ou autres techniques ce serais super

Ici les thèmes changent facilement de bannière image, le seul problème c'est que j'ai du faire plusieurs images en fonction de la résolution sans compter le script qui redirige l'utilisateur vers sa résolution, trop compliqué donc j'ai abandonné pour du tout en 1.
Exemple ici: http://kunpen75.free.fr/aa/fr/index3c.php

Nouvelle version tout en un sur lequel je travail actuellement ou se situe mon problème actuel...
Exemple ici: http://kunpen75.free.fr/a2

De plus j'aimerais faire un effet de fondu (fading) entre 2 thèmes
Appeler un script java pour faire tomber de la neige sur un des thèmes
Appeler un script pour lancer un lecteur de musique en flash pour chaque thèmes
mais bon la c'est une autre histoire mais si l'un de vous connais la méthode pour faire le tout avec un ou des script léger ou du CSS ce serais magnifique

(j'ai déjà le script pour la neige que je vais remplacer par des pétales de cerisier, des lecteur de musique en flash à foison, effet de fondu ou autre léger j'ai pas encore trouvé...)

**lvr** · 27/01/2009, 17h51

Petite suggestion d'un css-noob: Est-ce que la propriété width ne s'applique pas uniquement au élément qui ont une disposition de type "block" alors que les ton span et ton image ont une disposition de type "inline" ? Je testerais d'ajouter mon #banner un "display: block;"

**kunpen** · 27/01/2009, 19h54

Merci de ton initiative Ivr !

J'avais déja tenté rapidement avec les block sans succès mais après ton post j'ai réessayé de différente manière avec block et je suis en train de me renseigner sur le net pour mieux connaitre son fonctionnement et ses options.

Grâce à ta suggestion l'image change suivant le thème mais le problème est toujours là, la bannière image reste toujours à sa taille d'origine au lieu de s'étendre automatiquement en largeur comme le ferais le width à 100% en HTML...

Voici mon code actuel

default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
div#banner {
background:url(bannerdefault.jpg) no-repeat;
display: block;
border:0
}

blue.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
div#banner {
background:url(bannerblue.jpg) no-repeat;
display: block;
border:0
}

index.HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="nature-theme" href="nature.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="silver-theme" href="silver.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="space-theme" href="space.css" />
<title>Document sans nom</title>
<script type="text/javascript" src="styleswitch.js"></script>
</head>
 
<body>
<a href="javascript:chooseStyle('default', 60)" checked="checked" >thème par default </a>
<a href="javascript:chooseStyle('nature-theme', 60)" >thème nature</a>
<a href="javascript:chooseStyle('silver-theme', 60)" >thème silver</a>
<a href="javascript:chooseStyle('blue-theme', 60)" >thème blue</a>
<a href="javascript:chooseStyle('space-theme', 60)" >thème space</a>
 
<div id="banner"><img src="imagetransparente.png" alt="banner" width="100%" height="159" border="0" /></div>
 
</body>
</html>

Des solutions SVP?

**GihefBey** · 28/01/2009, 00h18

Bonjour,

Pour faire ça tu ne peux pas utiliser l'image en background.
Par contre, sur une image c'est possible.

Par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="banner">
  <img src="banniere.png" alt="bannière" />
</div>

avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#banner img{ 
  display : block;
  width : 100%;
  }

-

**kunpen** · 28/01/2009, 17h44

Heu...Tu peu développer GihefBey ?
Sans 2ème image pour passer d'une bannière à l'autre je fait comment du coup?

**lvr** · 28/01/2009, 18h17

Tu as un background coloré qui change en fonction du thème auquel tu superpose l'image "the_default.jpg" qui, elle, reste la même quel que soit le thème ? C'est ça que tu veux faire ?

Comment remplacer la balise img src width à 100% en CSS? [Fait]

CSS

Vue hybride

Discussions similaires

Partager

Partager