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

Question

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

我有一个响应式网站，但由于我的 rokSprocket "hero image" 幻灯片放映，移动浏览器陷入了困境。我没有看到根据媒体查询更改图像的方法，也没有看到任何服务器端图像大小调整选项。

是否有我忽略的选项？
有什么方法可以将它们变成背景图像以便我可以在媒体查询中更改它们吗？
有没有办法根据媒体查询忽略/添加模块？
- 发现 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');}
}

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

Can I change rokSprocket Images Based On The Viewport Size?

joomla

joomla-extensions