Question

有没有办法让rokSprocket图像更具移动性？

我有一个快速响应的网站，由于我的rokSprocket＆＃34;英雄形象＆＃34;移动浏览器陷入困境。幻灯片。我没有看到基于媒体查询更改图像的方法，我也没有看到任何服务器端图像大小调整选项。

我可以选择忽略吗？
有没有办法将它们变成背景图像，以便我可以在媒体查询中更改它们？
有没有办法根据媒体查询忽略/添加模块？
- 找到了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图像吗？

1 个答案: