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

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 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

6 个解决方案

#1

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/

#2

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 myClass to your effected image elements similar to the below:

将myClass添加到受影响的图像元素，类似于以下内容：

<img class="yourClass">

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

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

#3

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 Responsive实用程序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 -->

#4

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

在这种情况下，我不认为等待DOM Ready（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.

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

#5

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/");
    }
}

#6

You Can use resize()

你可以使用resize（）

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

});

}）;