image centrée sur la fenêtre

Question

Certains progrees de ma vieille question (Center and hide image, fitting div size)

#slideshow { 
    height: 550px; 
    width: 1400px; 
    overflow: hidden; 
} 
.slide { 
    // NEED TO BE ABSOLUTE POSITIONED. If I comment the line, all work as expected, but slideshow don´t slide. 
    position: absolute; 
} 
.slide img { 
    height: 550px; 
    left: 50% !important; 
    margin-left: -700px; 
    position: absolute; 
} 


<div id="slideshow"> 
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div> 
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div> 
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div> 
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div> 
</div> 

Ce que j'attends? Attendez-vous à ce que l'image soit centrée sur la fenêtre. Si la résolution est inférieure à l'image, la gauche et la droite des images seront cachées.

Désolé mon anglais, et merci!

Answer 1

Ceci peut être réalisé en utilisant un simple hack. Vous pouvez aligner un div au centre de la page qui a 1px largeur, puis mettre l'image dans ce div. Vous définissez ensuite la marge gauche de cette image à la moitié de la largeur des images.

Voir cette example (je l'ai laissé la couleur de fond de la div centrale en rouge afin que vous puissiez voir)