Question

到目前为止，我用过WordPress网站的所有图像滑块插件都无法在各种屏幕尺寸下换出不同尺寸的图像，以便首先使用“移动设备”。经验。

例如：http://www.akqa.com/

他们根据某些断点更改了显示的图像，并且可以控制图像的哪个部分显示。

如果没有自动化插件的插件，至少可以通过CSS单独实现吗？

谢谢

Answer 1

您可以通过HTML picture tag或Jquery .data()

执行此操作

Jquery示例

orignalImg = $(".test").attr("src"); // get orignal image
mobileImg = $(".test").data("mobile"); // get mobile image
brakpoint = 768; //what ever your brakpoint

//do magic
function changeImg() {
  $(".test").each(function() {
    if ($(window).width() <= brakpoint) {
      $(this).attr("src", mobileImg);
    }else {
   	 	$(this).attr("src", orignalImg);
    }
  });
}
// call magic
changeImg();

//change image if viewport change
$(window).on('resize', function() {
  changeImg()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Resize your window </h1>
<img class="test" src="http://placehold.it/600x300" data-mobile="http://placehold.it/300x600">

HTML示例

<picture>
 <source srcset="http://placehold.it/600x300" media="(min-width:768px)">
 <img src="http://placehold.it/300x600" alt="img">
</picture>

在example link中，他们也在使用此<picture>标记。这是一个简单的解决方案，但您可能会遇到browser compatibility issue

＆＃39;移动优先＆＃39; Wordpress sider的图像加载

1 个答案: