css - 使用 zurb foundation 轨道 slider 时，如何使幻灯片居中

Question

如截图所示: 在我的 24"显示器上，白色背景通过我的轨道 slider 显示。 这是因为我的源图像比浏览器窗口的宽度窄(以像素为单位)。

如果我将窗口变窄，图像会像预期的那样缩小，而不会显示任何背景:

我想要完成的是将 <li> 居中组成幻灯片的元素，这样当图像变窄时，它的一侧不会有看起来很笨拙的白色条纹。

Answer 1

试试这个:

设置一个full_width类，样式如下:

.full_width {
    width:100%;}

将这个类添加到轨道 ul:

<ul class="full_width" data-orbit data-options="...">
   <li><img src="img/slider/slide1.png"></li>
   <li><img src="img/slider/slide2.png"></li>
   <li><img src="img/slider/slide3.png"></li>
   <li><img src="img/slider/slide4.png"></li>
</ul>

然后在您的样式表中添加一类 full_width li img 并设置图像的宽度并添加 margin: 0 auto like:

.full_width li img {
    width:960px;
    margin:0 auto;}