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

Posted 2023-02-23

【中文标题】如何根据屏幕宽度更改图像路径？

【英文标题】：How to change an image path based on screen width?

【发布时间】：2013-05-23 03:27:48

【问题描述】：

我正在尝试根据窗口宽度更改读取图像的文件夹。

我有两个包含不同图像尺寸的文件夹，我想知道是否有人可以就如何根据屏幕宽度更改路径给我任何建议。

如果屏幕是正常的，<img> 看起来像

<img src="images/620x410/image1.jpg" >

如果屏幕在平板电脑宽度内，它将加载

<img src="images/310x205/images1.jpg" >

310X205

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg

【参考方案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">

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

【讨论】：

我不知道这些——真的很有趣！只是为了 OP 的好处：IE7-IE9 不支持 CSS 媒体查询。对此可以使用 polyfill，但 IE7 也不支持 CSS 内容规则，因此这仅适用于 IE8+ 和大多数其他版本的主流浏览器。

@Blade0rz：不错的一个 +1。不知道 IE 和 content。一种替代方法是使用纯 div 和 CSS 以 background-image 属性为目标，但如果媒体查询不是一个选项，那么在这种情况下使用 javascript/jQuery 检测屏幕宽度可能是更好的选择。跨度>

这应该是公认的答案。也适用于调整屏幕大小时。

只是提醒那些需要跨浏览器支持的人 - 此解决方案仅适用于 Chrome。替换掉 src 值的 JS 解决方案是要走的路。

@KennyJohnson content CSS 仅适用于 :before 和 :after 伪元素。以这种方式对<img> 标签使用它不是 CSS 标准，而且显然只能在 Chrome 中使用。话虽如此，您没有理由不能在 Chrome 中使用 CSS 一种，在其他浏览器中使用 JS 一种，以实现两全其美。

【参考方案2】：

您可以使用$(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/

【讨论】：

谢谢，这正是我想要的！

不应该是：$(window).width()

【参考方案3】：

我使用 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" ></center></div>
    <div class="item"><center><img src="images/site-banner/large/image02.jpg" ></center></div>
    <div class="item"><center><img src="images/site-banner/large/image03.jpg" ></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" ></center></div>
    <div class="item"><center><img src="images/site-banner/small/image02.jpg" ></center></div>
    <div class="item"><center><img src="images/site-banner/small/image03.jpg" ></center></div>
  </div><!-- end carousel-inner -->      
</div><!-- end site-banner-small -->

【参考方案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/");
    

将它粘贴到你的 body 标签的底部。

【参考方案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/");
    

【参考方案6】：

您可以使用resize()

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

if($(window).width() > 310 ) 
   $('img').attr('src','folder2'+filename);

);

【参考方案7】：

如果您真的想拥有不同的图像，那么 Nope 选项是最好的。但在许多情况下，您只想拥有不同尺寸的相同图像。 所以也许是一个“混合”的解决方案：

 @media screen and (max-width: 310px)
 
 .yourClass_img1 content:url("images/310x205/image1.jpg");
 .img_listwidth:100%;height:100%
 

 @media screen and (min-width: 620px) 
 
 .yourClass_img1 content:url("images/620x410/image1.jpg");
 .img_listwidth:60%;height:60%
 

这样，如果某些图像需要真正不同，“content:url”将有效，当“width:height”适用于图像时，您只需更改大小即可。