css - 在 Nivo Slider 插件中重新定位一张图片

Question

我是网络开发和 jQuery 的新手，所以请多多包涵。

我在我正在处理的网站上使用 Nivo Slider。这是一个响应式网站，我希望 slider 在所有屏幕尺寸上都能轻松看到。我在我的 CSS 中设置了一个断点，以便当网站达到其最小尺寸(大约移动屏幕的尺寸)时， slider 设置为 200% 宽度， overflow hidden ，以便图像更大。

这很好用，但是在这个尺寸下您只能看到 slider 的中心，而两侧被屏幕边缘裁剪掉了。对于我使用的大多数图像来说，这不是问题，但是其中一个图像被裁剪得非常笨拙。重新定位整个 slider 很容易，但我想尝试将这张图片移到上面，以便在小屏幕上可以更好地看到它。

我添加到默认 nivo-slider.css 的 CSS 是:

@media screen and (max-width: 31.25em) { /* 500px ÷ 16px */

.slider-wrapper{
    overflow: hidden;
}

.nivoSlider {
    left: -50%;
    width:200%;
}

.nivo-caption {
    margin-left: 25%;
    width: 50%;
}

}

非常感谢!

Answer 1

只需使用 CSS，您就可以为该特定图像添加一次性类型类，并将其放入您的@media 查询中:

.my-one-off { left:??px;右边距:??px }

您也可以使用 jQuery 搜索该图像(如果我没记错的话，Nivo 使用的是 jQ 库)。

$('img[src*="one-off.jpg"]').css('margin-left',35);//只是一个例子

或者

$('img[src*="one-off.jpg"]').addClass('my-one-off');