Question

我在DOM中有一个img标记。

<div class="some-div">
     <img src="https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/133/Social_Media_Socialmedia_network_share_socialnetwork_network-09-128.png">
</div>

现在当浏览器宽度变为768px（实际上是标签，智能手机）时，我需要更改img标签的src。这意味着只需将图像更改为另一个图像。例如： -

<div class="some-div">
     <img src="https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/133/Social_Media_Socialmedia_network_share_socialnetwork_network-09-128.png">
</div>

请记住，由于某些原因我无法在css中使用background-image属性，因此无法编写像@media only屏幕这样的媒体查询和（max-width：768px）

我需要通过JS或无论如何改变它。你能帮我吗？非常感谢。

Answer 1

请记住，由于某些原因我无法在css中使用background-image属性，因此无法编写像@media only屏幕这样的媒体查询和（max-width：768px）

如果具体您无法使用background-image，但您可以使用媒体查询，那么：

@media (min-width: 769px) {
    img.small {
        display: none;
    }
}
@media (max-width: 768px) {
    img.big {
        display: none;
    }
}

...并在你的标记中：

<img class="big" src="/path/to/big/image.png">
<img class="small" src="/path/to/small/image.png">

如果您无法使用媒体查询，那么：

<img data-big="/path/to/big/image.png" data-small="/path/to/small/image.png">

和

(function() {
    var lastSizeAttr = null;
    var list = document.getElementsByTagName("img"); // the list is live
    var resizeTimer = 0;

    window.addEventListener("resize", maybeResize);

    function maybeResize() {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(imageResize, 100); // Wait 100ms
    }

    function imageResize() {
        var attr = favorite_width_prop_here < 769 ? "data-small" : "data-big";
        var img;
        var n;

        resizeTimer = 0;
        if (attr !== lastSizeAttr) {
            lastSizeAttr = attr;
            for (n = 0; n < list.length; ++n) {
                img = list[n];
                img.src = img.getAttribute(attr);
            }
        }
    }
})();

...或类似于HTML的 end （因此getElementsByTagName找到了元素）。请注意favorite_width_prop_here，如果您不使用jQuery，我不会立即回想起要使用的属性。： - ）

Answer 2

您需要计算窗口大小的宽度。

function calculateWidth(){
   if(window.outerWidth <= 768){
      var imgTag =  document.getElementElementById('someImage');
      imgTag.src = "imageForTab.jpg"; //here your small image would be for tab
    }
}

//attaching the function on window resize
window.addEventListener('resize', calculateWidth);  

<body onload="calculateWidth()"> //calling the function on body onload

请在您的图片代码上添加ID。

 <img id="someImage" src="https.....

这只是用这个id（'someImage'）给出的图像。

如何在不使用媒体查询的情况下在特定浏览器宽度中更改DOM中的图像

2 个答案: