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

【问题标题】：How to change an image from the DOM in a particular browser width without using media-queries如何在不使用媒体查询的情况下以特定浏览器宽度从 DOM 更改图像
【发布时间】：2014-01-28 16:49:23
【问题描述】：

我在 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 screen and (max-width: 768px)

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

【问题讨论】：

在window.onresize事件中添加回调来检查窗口大小并在窗口宽度< 768时更改图像src。

标签： javascript css html responsive-design media-queries

【解决方案1】：

请记住，由于某种原因，我不能在 css 中使用 background-image 属性，因此无法编写像 @media only screen and (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，我不会立即回忆起要使用哪个属性。 :-)

【讨论】：

嘿@T.J，谢谢伙计。我太傻了。是的，只需在大屏幕上隐藏一个即可。根本不需要使用 JS。没有先点进去。顺便谢谢。

【解决方案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') 的图像。

【讨论】：