如何根据浏览器宽度用 javascript 更改 img src？答案

【问题标题】：how do you change img src with javascript depending on browser width?如何根据浏览器宽度用 javascript 更改 img src？
【发布时间】：2015-09-22 04:19:28
【问题描述】：

我想更改 id 为“front”的图像元素的来源。我在顶部有一个基本脚本，但它不起作用。我只是想想出一些东西，但我的 JavaScript 很糟糕。

<html>

<head>
<link rel="stylesheet" type="text/css" href="home.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="home.js"></script>
<script type="text/javascript">

    var reswidth=screen.width;

if (reswidth<400){
  var x = document.getElementsById("front");
  x.src="../images/colbysmall.png"
}

</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="header">
<div class="navigation">
<ul>
  <li><a id="home" href="">Home</a></li>
  <li><a href="">Services</a></li>
  <li><a href="../portfolio/portfolio.html">Portfolio</a></li>
  <li><a href="../contact/contact.html">Contact</a></li>
  <li><a href=""></a></li>
</ul>

</div>
<div class="yellow"></div>
<div class="x"></div>

</div>
</head>



<body>
<div class="website">


<div class="logo"></div>

<img src="../images/ColbyFaceblack.jpg" id="front" width="100%" >
<div class="content">
<div class="menu"></div>
<div class="office"></div>


</div>



<div class="body2">

<img src="../images/simple_dashed_full.png" width="100%">

<div class="weboutline">
    <img src="../images/web_outline.png" width="100%">
</div>
<div class="body2img2">
    <img src="../images/portfolio.png" width="100%">
</div>

<div class="body2img3">
    <img src="../images/blog.png" width="100%">
</div>

</div>
<div class="body3">

<img src="../images/body.png" width="100%">
<img class="touch" src="../images/get_in_touch_beige.png" width="50%">




</div>

<footer>
<img src="../images/footer.png" width="100%">
    <div class="copyright"> copyright COLBY MOFFETT 2015 </div>
    <div class="facebook"></div>
    <div class="instagram"></div>
    <div class="twitter"></div>
</footer>






</body>
</div>

</html>

【问题讨论】：

您在 DOM 加载之前在 <head> 部分执行代码，因此 DOM 元素尚不存在。如果你有 jQuery，你可以使用 $(document).ready() 来安排代码在 DOM 加载后运行。您可能还想在窗口调整大小时运行代码。

标签： javascript jquery html css responsive-design

【解决方案1】：

这是对的，但必须在更改屏幕尺寸时执行：

$(function () {
  $(window).resize(function () {
    var reswidth=screen.width;
    if (reswidth<400){
      var x = document.getElementsById("front");
      x.src="../images/colbysmall.png"
    }
  });
});

还要确保在 $(function () { }); 内执行它以在 DOM 加载的内容上执行。因此，为了确保它在加载时也能执行，您需要将它存储在一个命名函数中，并在每次调整窗口大小时执行它。

您的最终代码将是：

$(function () {
  var reszWindow = function () {
    var reswidth=screen.width;
    if (reswidth<400){
      var x = document.getElementsById("front");
      x.src="../images/colbysmall.png"
    }
  };
  reszWindow();
  $(window).resize(reszWindow);
});

【讨论】：

这不会在第一次加载页面时运行代码。
也许将它存储到一个命名函数中，在 resize 事件和 DOM 就绪时调用此函数可以做到...除非 resize 函数自动调用 onload。
我参与其中并将其与另一个答案结合起来，效果非常好。谢谢！

【解决方案2】：

由于您已经在使用 jQuery，以下可能是解决方案之一：

$( window ).resize(function() {
    if($( window ).width() < 400) { 
        $("img#front").attr("src","../images/colbysmall.png");
    } else {
        $("img#front").attr("src","../images/ColbyFaceblack.jpg");
    }
});

（PS。未经测试的代码）:)

【讨论】：

【解决方案3】：

根据屏幕分辨率改变图像：

$(window).resize(function() {
    var scrWidth = $(window).width();
    if(scrWidth < 500){
        $('#myImage').attr('src', 'http://wallpaper-download.net/wallpapers/logo-wallpapers-google-chrome-background-wallpaper-33143.jpg');
    }
    if(scrWidth > 500){
        $('#myImage').attr('src', 'http://www.bhmpics.com/download/google_colorful_background-1920x1080.jpg');
    }
});

（来自谷歌的随机图片）

在这里提琴：http://jsfiddle.net/59ehtLde/

【讨论】：

【解决方案4】：

除了 Javascript，您只需使用 HTML5 即可。浏览器支持isn't great,，但也不错。

<picture>
   <source media="(min-width: 400px)" srcset="../images/colbysmall.png">
   <img src="../images/ColbyFaceblack.jpg">
</picture>

<p>With placeholders:</p>

<picture>
   <source media="(min-width: 400px)" srcset="http://placehold.it/400?text=colbyfaceblack">
   <img src="http://placehold.it/200?text=colbysmall">
</picture>

【讨论】：