jquery - 如何使幻灯片中的图像居中？

Question

我使用 Nivo Slider 插件。我有一张图片（宽度 = 2000 像素）。我想将图像居中在幻灯片的中心。

我的桌面宽度是 1280。如果我打开侧面，我需要从图像的开头和结尾裁剪 360 像素，并从中心显示 1280 像素。

如果我调整浏览器的大小，我只需要看到中心。

是否有可能实现这一点。我不希望幻灯片反应灵敏。

Answer 1

我不确定 Nivo 滑块，但将图像居中的最佳方法如下

这是一个html示例

<div class="wrapper">
    <div class="slider">
        <img some image here/>
    </div>
</div>

CSS 将像这样设置：

.wrapper {
    width:100%;
    height:400px;
}
.slider {
    width:100%;
    height:100%;
    position:relative;
}
img {
    width:2000px;
    position:absolute;
    left:50%;
    margin-left:-1000px;
}

这会使图像在任何屏幕上居中。img CSS 将图像的左侧放置在屏幕上 50% 的位置（或居中）。然后你必须给左边距一个负数的图像宽度的一半，以将图像的中心点放在屏幕的中心点上。