Question

Some progrees from my old 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>

What I expect?
Expect image centered on window. If resolution is less then image, left and right of images will be hidden.

Sorry my English, and thanks!

Answer 1

This can be achieved using a simple hack. You can align a div to the center of the page that has 1px width, and then put the image in that div. You then set the margin-left of that image to be half of the images width.

See this example (I have left the background colour of the central div as red so you can see)