如何根据屏幕宽度更改图像路径？
我正在尝试根据窗口宽度更改从中读取图像的文件夹。
我有两个文件夹，包含不同的图像大小，我想知道是否有人可以给我任何建议，如何根据屏幕宽度更改路径。
如果屏幕是常规的，
如果屏幕处于平板电脑宽度，则会加载
310X205
image1.jpg image2.jpg
620X410
image1.jpg image2.jpg
你可以使用$(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/
如果使用媒体查询的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添加到受影响的图像元素，类似于以下内容：
![]()
您可能需要根据需要调整一些值。
我使用Bootstrap Responsive实用程序visible-xs和hidden-xs实现了类似的效果。 我需要在旋转木马中使用不同的图像集，具体取决于浏览器窗口的大小。
在这种情况下，我不认为等待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/"); } }
将其粘贴到身体标签的底部。
我正在尝试将“图像更改路径系统”用于网页内的不同图像。 这个想法不是改变“背景”图像（所以只是一个图像），我想根据屏幕方向改变图像路径：
至于PHP
$("#imageId").attr("src", "your new url here");
这种，但不知道怎么样
@media screen and (orientation: landscape) { .yourClass { content:url("images/landscape/"); } } @media screen and (orientation: portrait) { .yourClass { content:url("images/portrait/"); } }
你可以使用resize（）
$(window).resize(function() { if($(window).width() < 310 ) { $('img').attr('src','folder1'+filename); } if($(window).width() > 310 ) { $('img').attr('src','folder2'+filename); }
}）;