Discussion :

[kate59]

Bonjour,

voila j'ai un site avec une bannière en img pas de background car elle est changer régulièrement.
mais problème lorsqu'il y a une résolution inférieur l'image reste fixe donc 1200*500 et sort de mon site.
pas esthetic du tout.

auriez vous une solution niveau css?



Merci.

[Muchos]

Vous pouvez utiliser les media-queries pour changer l'image en fonction de la résolution. Ex :

Code :

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

1
2
3
4
5
6
7
 
@media screen and (min-width: 800px) {
header {background-image: url(image-800-320.png)}
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
header {background-image: url(image-1200-500.png)}
}

[kate59]

merci pour l aide mais en faite mon header est ainsi:

Code :

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

1
2
3
<div id="header">
<img src ="header1.png" />
</div>

ce n est pas un background mais un img.
Obliger dans mon cas.
merci.

[NoSmoking]

Bonjour,

ce n est pas un background mais un img.
Obliger dans mon cas.

et pourquoi si ce n'est pas indiscret?

Une autre question est, souhaites tu utiliser la même image et ce quelque soit la résolution?

Tu viens avec une question et tu repars avec 2

[kate59]

car en faite la banniere peut etre changer par rapport a l utilisateur:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="header">
 
 
<?php
  $managerBanniere = new BanniereManager_PDO($db);
 
$ListeBanniere=$managerBanniere->getBanniereActiver();
 
echo'<img src="'.RACINE.'/images/banniere/'.$ListeBanniere->getImageBanniere().'" style="width:50%" />';
 
	?>
</div>

donc l image change regulierement.

merci.

[Macmillenium]

Code CSS :

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

1
2
 
#header img { max-width:100%; }