调整大小时水平居中图像

时间:2012-12-17 23:46:32

标签: javascript css slideshow

我被困了......

我有一张1920px X 400px图像的幻灯片。因此,当我在1920px +浏览器窗口上全屏时,图像仅居中。如果我重新调整窗口大小,哦,说到1600px,图像向右移动,与网站的其余部分不对齐。

我希望幻灯片保持居中,因为我缩放浏览器窗口的宽度,并根据浏览器的宽度向左和向右显示/隐藏图像区域。我不想缩放图像比例,我不能使用背景图像,这两种方法都很容易解决。

我假设一个JS监听器计算浏览器窗口的图像宽度和宽度,以便在中心不断显示它。

演示网站位于:http://bit.ly/YdMZDO

1 个答案:

答案 0 :(得分:2)

on .slides-wrapper添加以下样式:

left: 50%;
margin-left: -960px; // half the width of your image block