使用 jQuery 和媒体查询删除 Img 大小答案

【问题标题】：Remove Img Size with jQuery and media query使用 jQuery 和媒体查询删除 Img 大小
【发布时间】：2016-09-20 05:09:04
【问题描述】：

我希望当分辨率小于 980px 时，应该执行下面的代码（从img 中删除宽度和高度）。代码将如何？谢谢

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){

        $('img').each(function(){ 
            $(this).removeAttr('width')
            $(this).removeAttr('height');
        });
    });
</script>

【问题讨论】：

我在这里看不到任何表示@media 查询的代码。此外，@media 查询只会更改 CSS ...如果您在 img 标签上硬编码了高度和宽度属性，我相信这些属性将优先于 CSS 实现的高度和宽度，或者至少会导致渲染问题因为在加载过程中会出现一种尺寸，并且在 CSS 完成标记样式后可能会突然改变。

标签： jquery image media-queries

【解决方案1】：

您可以使用调整大小功能。

$(window).resize(function(){
    if( $(this).width() < 980 )
    {
        $('img').each(function(){ 
            $(this).removeAttr('width').removeAttr('height');
        });
    }
});

当它们变大时再放回去？

$(window).resize(function(){
    if( $(this).width() < 980 )
    {
        $('img').each(function(){ 
            $(this).data("widthheight", { w : $(this).attr("width"), h : $(this).attr("height") });
            $(this).removeAttr('width').removeAttr('height');
        });
    }
    else
    {
         $('img').each(function(){ 
            if( $(this).data("widthheight") )
            {
                $(this).attr('width', $(this).data("widthheight").w)
                       .attr('height', $(this).data("widthheight").h);
             }
        });
    }
});

【讨论】：

不过，我不推荐这种方法。窗口调整大小会在许多不同的操作上触发......在移动设备上，可以（并且经常）在设备方向更改时触发。如果您在其中进行大量操作，这将很快锁定 UI。
是的，如果你调整大小，它会发生很多，但是，你需要绑定调整大小，否则你无法检测到它是否被调整大小？你有什么建议？
我会对媒体查询使用响应式方法，这是 OP 在他的问题标题中所暗示的，但没有提供足够的代码来说明他的标记/css 当前的结构。正如他的问题所表明的那样，我们真的不知道我们是在处理<img height="300" width="20"/> 还是<img style="height:300px;width:20px"/>（或者，如果是后者，希望是类驱动的），所以你的解决方案甚至可能不适合实际问题，因为我们没有足够完整的问题来解决。
尤其是你问题的后半部分......每次发出调整大小事件时都会导致整个 DOM 回流，这是一个非常昂贵的提议，尤其是在图像很大的情况下。如果 OP 无法控制标记的输出方式，那么这可能是他唯一的选择，但我宁愿在建议采取这条路线之前了解更多信息，仅此而已。
完全正确，我希望它是基于 CSS 的。因为我们实际上可以用 CSS 而不是 JS 来解决这个问题，这当然要好得多。

【解决方案2】：

你可以让它更简洁：

jQuery(document).ready(function($){
    $('img').removeProp('width').removeProp('height');
});

【讨论】：

【解决方案3】：

我想我找到了一个相关的堆栈溢出线程 here 。我假设一旦检测到屏幕分辨率，您将需要编写一个简短的 javascript 函数。

【讨论】：