Image (centrées) pleine largeur sans redimensionnement

**__fabrice** · 18/04/2012, 10h18

Salut à tous,
J'ai une question qui parait toute bête.

J'aimerai afficher des images (de 1900px, pour faire un slideshow) qui prenent toute la largeur de l'ecran mais sans être redimensionnées.

Par exemple,dans un ecran en 1900px de large, les images sont affichées entière. Par contre, dans du 1024px, les images resteront centrées et non redimensionnées !

J'ai fait ceci, mais çà marche pas :

Code :

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

1
2
3
4
5
6
7
8
<div class="wrap">
 
	<div id="example1"><img src="1.jpg" /></div>
	<div id="example2"><img src="2.jpg" /></div>
	<div id="example3"><img src="3.jpg" /></div>
	<div id="example4"><img src="4.jpg"  /></div>
 
</div>

le css :

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
.wrap {
    height: 263px;
    overflow: hidden;
    position: relative;
}
.wrap div  {
    position: absolute;
    left: 0;
    width:100%;
    height:263px;
    background-position : center center;
}
 
.wrap img {
   /* background-position : center center;*/
}

Cela marche en css en fesant çà :

Code :

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

1
2
3
4
5
6
7
8
<div class="wrap">
 
	<div id="example1"></div>
	<div id="example2"></div>
	<div id="example3"></div>
	<div id="example4"></div>
 
</div>

css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#example1 {
background: url(1.jpg) center center no-repeat;
}
#example2 {
background: url(2.jpg) center center no-repeat;
}
#example3 {
background: url(3.jpg) center center no-repeat;
}
#example4 {
background: url(4.jpg) center center no-repeat;
}

Mais comme je dois faire un slideshow, je dois mettre les images dans les div, et pas dans le css.

Merci de votre aide.
Fabrice

**NoSmoking** · 18/04/2012, 22h14

Bonsoir,
tu peux utiliser le principe des marges négatives
- on applique une margin-left:50%;, ce qui place le bord gauche de l'élément au centre du conteneur
- on décale vers la gauche de la moitié de la largeur, left:-largeur/2 px;, ce qui place indirectement le centre de l'élément au centre du conteneur.

exemple en "image":

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
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Marge négative</title>
<style type="text/css">
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.wrap {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.wrap div  {
    position: absolute;
    width:100%;
    height:100%;
}
.wrap img {
   position:absolute;
   width:3000px;
   height:486px;
   margin-left:50%;
   left:-1500px;    /* moitié de la largeur */
}
</style>
</head>
<body>
<div class="wrap">
	<div><img src="http://pouldreuzic.bro-vigoudenn.com/images/panorama_penhors_big.jpg"></div>
</div>
</body>
</html>

Néanmoins des images de 1900px pour un slide, il me semble que cela risque d'être lourd au chargement.

**__fabrice** · 18/04/2012, 23h10

Bonsoir,

Merci, çà à l'air de marcher nickel. Je vais tester çà des demain matin et je te dis si c'est ok.

Et oui je sais, il y a a 5 images en 1900px. çà fait du 200ko en plus... je l'ai dis au graphiste qui à fait le design...

a+
Fabrice

**__fabrice** · 18/06/2012, 20h49

Salut,

Avec un peu de retard, et bien, ta méthode fonctionne tres bien.

Merci
F.

Image (centrées) pleine largeur sans redimensionnement

Dimensionnement en CSS

Discussions similaires

Partager

Partager