Question

 <img id="demo" src="" />    

<script>
    if (window.innerWidth > 500)
    {

    }
    else 
    {

    }
</script>

这是我的代码。如何根据浏览器宽度更改src的值？

Answer 1

通常，您可以使用媒体查询和CSS切换图像，但如果您真的需要JS，则可以执行以下操作：

 <script>
    var resize_image = function(event) {
        var img = document.getElementById("demo");
        var w = window.innerWidth;

        if(w < 2000)
        {
            img.src = 'LINK1';
        }
        else if(w < 1024)
        {
            img.src = 'LINK2';
        }
        else if(w < 992)
        {
            img.src = 'LINK3';
        }
        else if(w < 768)
        {
            img.src = 'LINK4';
        }
        else
        {
            img.src = 'LINK5';
        }
    };
    window.addEventListener('DOMContentLoaded', resize_image); // document loaded
    window.addEventListener('resize', resize_image, true); // on resize
</script>

但是如果你需要响应式图像，只需给你的图像简单的CSS规则，如：

#demo{
display:block;
max-width: 100%;
    height: auto;
}

Answer 2

如果要使用CSS解决此问题，则可以使用CSS Media查询。您可以使用JQuery根据媒体查询更改图像。我认为你有我的观点。

Answer 3

您可以使用它来更改源值：

<img id="demo" src="" />    

<script>
var img = document.getElementById("demo");
    if (window.innerWidth > 500)
    {
    img.src="your source";
    }
    else 
    {
    img.src="your source";
    }
</script>

或

$('#demo').src="your path";

如果你使用JQuery库，请使用：

$("#demo").attr('src', '//srcImage.jpg or any path');

如何根据浏览器宽度加载图像

3 个答案: