如何在幻灯片放映中居中图像？

Question

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

我的桌面宽度是1280.如果我打开侧面，我需要从图像的开头和结尾裁剪360px并从中心显示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％放在屏幕上（或居中）。然后你必须给左边距一个负数，使图像的中心点位于屏幕的中心点。