如何根据屏幕宽度更改图像路径？

Question

我正在尝试根据窗口宽度更改从中读取图像的文件夹.

我有两个包含不同图像大小的文件夹,我想知道是否有人可以根据屏幕宽度给出任何关于如何更改路径的建议.

如果屏幕是常规的<img>,那就像

<img src="images/620x410/image1.jpg" alt="">

如果屏幕处于平板电脑宽度,则会加载

<img src="images/310x205/images1.jpg" alt="">

310X205

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg

Answer 1

如果使用媒体查询的CSS是您的选项,则可以使用仅CSS解决方案.

将媒体查询添加到CSS,类似于以下内容:

@media screen and (max-width: 310px) {
  .yourClass {
    content:url("images/310x205/image1.jpg");
  }
}

@media screen and (min-width: 620px) {
  .yourClass {
    content:url("images/620x410/image1.jpg");
  }
}

添加myClass到受影响的图像元素,类似于以下内容:

<img class="yourClass">

您可能需要根据需要调整一些值.

Answer 2

您可以使用$(window).width();确定窗口的大小,然后相应地设置图像的src:

$(function() {
  if($(window).width() <= 310) {
    $("img").each(function() {
      $(this).attr("src", $(this).attr("src").replace("images/620x410/", "images/310x205/"));
    });
  }
});

您还应该注意,如果我以<= 310px的大小启动浏览器窗口,然后将其调整到上面,那么您的图像仍然是较小的版本.如果需要,您可能需要考虑使用resize事件来解决这个问题:http: //api.jquery.com/resize/