在移动设备上更改背景图像

Question

所以我正在使用 slickslider 在我的主页中创建一个滑块。 滑块大图像为 1920 x 700。滑块在大屏幕上的高度为 700 像素，在移动设备上会缩小到 400 像素。
我想创建一个 jquery 函数，它从我的幻灯片中获取 2 个数据属性（ data-img-mobile 和 data-img-large - 女巫是图像中的链接），然后根据视口更改背景图像。（小- 大型设备）
我是 jquery 的新手，所以你能帮帮我吗？
非常感谢！

<div class="hero-slider-wraper">
 <div class="hero-slider">
  <div class="hero-slider-component">
   <div class="hero-slider-image" data-img-mobile="" data-img-large="http://sitename.com/wp-content/uploads/2017/01/home1.jpg" style="background-image:url('http://sitename.com/wp-content/uploads/2017/01/home1.jpg');"></div>
   <div class="hero-slider-image" style="background-image:url('http://sitename.com/wp-content/uploads/2017/01/home2.jpg');"></div>
   <div class="hero-slider-image" style="background-image:url('http://sitename.com/wp-content/uploads/2017/01/home3.jpg');"></div>
   </div>
  </div>
 </div>
</div>

Slick Slider 锚定在 hero-slider-component 上

Answer 1

您可以使用 CSS 媒体查询来实现此目的。例如：

@media (min-width: 400px) and (@max-width: 600px) // Or whatever the size of your mobile device is.
{
    .hero-slider-image {
        background-image:url('http://www.example.com/mobile-image.jpg')
    }
}

@media (min-width: 601px)
{
    .hero-slider-image {
        background-image:url('http://www.example.com/desktop-image.jpg')
    }
}

Answer 2

在css中最好使用@media方法。

/* This is for desktop and laptop */ 
@media screen and (min-width: 992px) {
    .hero-slider-image {
        background-image:url('http://www.example.com/desktop-image.jpg');
    }
}

/* This is for normal tabs */ 
@media screen and (min-width: 751px) {
    .hero-slider-image {
        background-image:url('http://www.example.com/tab-image.jpg');
    }
}

/* This is for mobiles */ 
@media screen and (max-width: 750px) {
    .hero-slider-image {
        background-image:url('http://www.example.com/mobile-image.jpg');
    }
}