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

How to change an image path based on screen width?

提问by Mitchell Layzell

I'm trying to change the folder that my images are read from depending on the window width.

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

I have two folders that contain the different image sizes and I'm wondering if anyone could give me any advice on how to change the path depending on the screens width.

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

If the screen is regular the <img>would look like

如果屏幕是规则的<img>，看起来像

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

and If the screen was in the tablet width it would load

如果屏幕在平板电脑宽度内，它将加载

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

310X205

310X205

image1.jpg
image2.jpg

620X410

620X410

image1.jpg
image2.jpg

回答by Nope

If CSS using media queries is an option for you, you could use a CSS only solution.

如果使用媒体查询的 CSS 是您的一个选择，您可以使用仅 CSS 的解决方案。

Add the media queries to your CSS similar to the below:

将媒体查询添加到您的 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");
  }
}

Add the myClassto your effected image elements similar to the below:

将myClass类似于下面的效果添加到您的图像元素中：

<img class="yourClass">

You might need to tweak the values a little for your needs.

您可能需要根据需要稍微调整这些值。

回答by CodingIntrigue

You can use $(window).width();to determine the size of the window, then set the src of the images accordingly:

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

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

You should also note that if I start my browser window at a size of <= 310px, then resize it to above that, your images will still be the smaller version. You might want to consider using the resize event to combat that if required: http://api.jquery.com/resize/

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

回答by M61Vulcan

I achieved a similar effect using Bootstrap Responsive utilities visible-xs and hidden-xs. I needed to use a different image set in a carousel depending on the size of the browser window.

我使用 Bootstrap 响应式实用程序visible-xs 和 hidden-xs 实现了类似的效果。我需要根据浏览器窗口的大小在轮播中使用不同的图像集。

        <div class="carousel slide hidden-xs" id="site-banner-big"  data-ride="carousel">   <!-- only show this carousel on large screens -->
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><center><img src="images/site-banner/large/image01.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/large/image02.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/large/image03.jpg" alt="Image"></center></div>
  </div><!-- end carousel-inner -->      
</div><!-- end site-banner-big -->

<div class="carousel slide visible-xs" id="site-banner-small"  data-ride="carousel">   <!-- only show this carousel on small screens -->
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><center><img src="images/site-banner/small/image01.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/small/image02.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/small/image03.jpg" alt="Image"></center></div>
  </div><!-- end carousel-inner -->      
</div><!-- end site-banner-small -->

回答by webrama.pl

I don't think waiting for DOM Ready (jQuery's $(document).ready)) is a good idea in this case. Better use plain javascript:

我不认为在这种情况下等待 DOM 就绪（jQuery 的 $(document).ready)）是一个好主意。最好使用普通的 javascript：

if (screen.width < 620) {
    var imgs = document.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) 
    {
        imgs[i].src = imgs[i].src.replace("images/620x410/", "images/310x205/");
    }
}

Paste it at the bottom of your body tag.

将其粘贴在身体标签的底部。

回答by ichtyo

I am trying to use the "image change path system" for different images inside the web page . The idea is instead of change the "background" image (so just a single image), i would like to change the images path depending on the screen orientation :

我正在尝试对网页内的不同图像使用“图像更改路径系统”。这个想法不是更改“背景”图像（所以只是一个图像），我想根据屏幕方向更改图像路径：

as for php

至于 php

$("#imageId").attr("src", "your new url here");

kind of this but dunno how

有点这样，但不知道如何

@media screen and (orientation: landscape) 
{
    .yourClass {
        content:url("images/landscape/");
    }
}

@media screen and (orientation: portrait) {
    .yourClass {
        content:url("images/portrait/");
    }
}

回答by chakroun yesser

You Can use resize()

您可以使用调整大小（）

$(window).resize(function() {
if($(window).width() < 310 ) {
   $('img').attr('src','folder1'+filename);
}
if($(window).width() > 310 ) {
   $('img').attr('src','folder2'+filename);
}

});

});