图像以窗口为中心

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>

我期待什么？ 期待图像以窗口为中心。如果分辨率低于图像，则图像的左右两侧将被隐藏。

对不起我的英文，谢谢！

Answer 1

这可以通过简单的黑客来实现。您可以将div对齐到页面宽度为1px的中心，然后将图像放在该div中。然后，您将该图像的左边距设置为图像宽度的一半。

请参阅此example（我已将中央div的背景颜色保留为红色，以便您可以看到）