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

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

Answer 3

我使用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 -->

Answer 4

我不认为在这种情况下等待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/");
    }
}

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

Answer 5

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

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

Answer 6

您可以使用resize()

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

}）;

Answer 7

如果你真的想要不同的图像，那么 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”适合图像时，您只需要更改大小即可。

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

7 个答案: