17

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

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg
4

7 回答 7

32

如果您可以选择使用媒体查询的 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">

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

于 2013-05-28T08:50:15.197 回答
23

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

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

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

于 2013-05-28T08:29:31.417 回答
4

我使用 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 -->
于 2015-07-04T20:43:57.650 回答
1

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

至于 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/");
    }
}
于 2014-01-09T14:43:04.253 回答
1

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

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

于 2013-05-28T08:39:55.047 回答
0

你可以使用resize()

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

});

于 2013-05-28T08:48:41.050 回答
0

如果您真的想拥有不同的图像，那么 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”对图像有好处时，你只需要改变大小。

于 2021-07-22T11:53:28.550 回答