我正在尝试根据窗口宽度更改读取图像的文件夹。
我有两个包含不同图像尺寸的文件夹，我想知道是否有人可以就如何根据屏幕宽度更改路径给我任何建议。
如果屏幕是正常的，<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
【问题讨论】：
标签： jquery image path window width
如果您可以选择使用媒体查询的 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">
您可能需要根据需要稍微调整这些值。
【讨论】：
content。一种替代方法是使用纯 div 和 CSS 以 background-image 属性为目标，但如果媒体查询不是一个选项，那么在这种情况下使用 JavaScript/jQuery 检测屏幕宽度可能是更好的选择。跨度>
content CSS 仅适用于 :before 和 :after 伪元素。以这种方式对<img> 标签使用它不是 CSS 标准，而且显然只能在 Chrome 中使用。话虽如此，您没有理由不能在 Chrome 中使用 CSS 一种，在其他浏览器中使用 JS 一种，以实现两全其美。
您可以使用$(window).width();来确定窗口的大小，然后相应地设置图像的src：
$(function() {
if($(window).width() <= 310) {
$("img").each(function() {
$(this).attr("src", $(this).attr("src").replace("images/620x410/", "images/310x205/"));
});
}
});
您还应该注意，如果我以 http://api.jquery.com/resize/
【讨论】：
我使用 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 -->
【讨论】：
在这种情况下，我认为等待 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/");
}
}
将它粘贴到你的 body 标签的底部。
【讨论】：
我正在尝试对网页内的不同图像使用“图像更改路径系统”。 这个想法不是改变“背景”图像（所以只是一个图像）， 我想根据屏幕方向更改图像路径：
至于 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);
}
});
【讨论】：
如果您真的想拥有不同的图像，那么 Nope 选项是最好的。但在许多情况下，您只想拥有不同尺寸的相同图像。 所以也许是一个“混合”的解决方案：
@media screen and (max-width: 310px)
{
.yourClass_img1 {content:url("images/310x205/image1.jpg");}
.img_list{width:100%;height:100%}
}
@media screen and (min-width: 620px)
{
.yourClass_img1 {content:url("images/620x410/image1.jpg");}
.img_list{width:60%;height:60%}
}
这样，如果某些图像需要真正不同，“content:url”将有效，当“width:height”适用于图像时，您只需更改大小即可。
【讨论】：