我可以根据视口大小更改 rokSprocket 图像吗？

Question

有没有办法让 rokSprocket 图像更适合移动设备？

我有一个响应式网站，但由于我的 rokSprocket“英雄形象”幻灯片，移动观众陷入了困境。我看不到根据媒体查询更改图像的方法，也看不到任何服务器端图像大小调整选项。

1. 有没有我忽略的选项？
2. 有没有办法将它们变成背景图像，以便我可以在媒体查询中更改它们？
3. 有没有办法根据媒体查询忽略/添加模块？
   • 发现 this guy 用于添加和删除模块。第一个问题仍然是我的首选解决方案

感谢任何指导、文档或帮助！

Answer 1

对于任何寻找此问题的答案的人，我最终制作了一张与幻灯片具有相同纵横比的透明图像，并用这张图片代替了我所有的 rokSprocket 图像。 （这是为了达到想要的高度和宽度）

然后我在我的 CSS 中定位幻灯片

.sprocket-features-index-1 img {}

并将实际图像放置为背景图像。

.sprocket-features-index-1 img {background-image: url('/images/homeSlide1.jpg');}

然后我只是将较小的图像设置为媒体查询

@media (max-width: 768px) {
    .home .sprocket-features-index-1 img {background-image: url('/images/homeSlide1-tablet.jpg');}
    .home .sprocket-features-index-2 img {background-image: url('/images/homeSlide2-tablet.jpg');}
    .home .sprocket-features-index-3 img {background-image: url('/images/homeSlide3-tablet.jpg');}
}

@media (max-width: 480px) and (-webkit-max-device-pixel-ratio: 1) {
    .home .sprocket-features-index-1 img {background-image: url('/images/homeSlide1-phone.jpg');}
    .home .sprocket-features-index-2 img {background-image: url('/images/homeSlide2-phone.jpg');}
    .home .sprocket-features-index-3 img {background-image: url('/images/homeSlide3-phone.jpg');}
}

@media (max-width: 480px) and (-webkit-max-device-pixel-ratio: 2) {
    .home .sprocket-features-index-1 img {background-image: url('/images/homeSlide1-phonex2.jpg');}
    .home .sprocket-features-index-2 img {background-image: url('/images/homeSlide2-phonex2.jpg');}
    .home .sprocket-features-index-3 img {background-image: url('/images/homeSlide3-phonex2.jpg');}
}