javascript - 以窗口为中心的图像

Question

我的旧问题的一些进展（中心和隐藏图像，适合 div 大小）

#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

这可以使用简单的 hack 来实现。您可以将 div 与 1px 宽度的页面中心对齐，然后将图像放入该 div。然后将该图像的左边距设置为图像宽度的一半。

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