使用jQuery和媒体查询去除图像大小

-1

我希望当分辨率小于980像素时，应执行下面的代码（从img中删除宽度和高度）。代码将如何？谢谢使用jQuery和媒体查询去除图像大小

<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>

来源

2013-02-22 Chead

我在这里没有看到任何代码表示一个'@ media'查询。另外，'@ media'查询只会改变CSS ......如果你在img标签上有高度和宽度属性的硬编码，我相信这些将优先于CSS实现的高度和宽度，或者至少会导致渲染在加载过程中会出现一个尺寸的问题，并且在CSS完成样式化标记时可能会突然改变。 – 2013-02-22 18:43:23

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

$(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); 
      } 
     }); 
    } 
});

来源

2013-02-22 18:38:22 Niels

虽然我不会推荐这种方法。窗口大小调整会被触发许多不同的操作......并且在移动设备上，可以（通常是）在设备方向更改时触发。如果你在内部进行了大量的操作，这将很快锁定用户界面。 – 2013-02-22 18:39:47

如果调整大小，确实发生了很多事情，但是，您需要在调整大小时绑定，否则您无法检测它是否调整大小？你有什么建议？ – Niels 2013-02-22 18:43:58

我会在媒体查询中使用响应式方法，这是OP在他的问题标题中暗示的内容，但没有提供足够的代码来说明他的标记/ css当前的结构。正如他的问题所述，我们并不真正知道我们是在处理''还是''（或者，如果后者希望由类驱动），所以您的解决方案可能甚至不适合实际问题，因为我们没有足够的问题来解决。 – 2013-02-22 18:48:56

您可以进行更简洁：

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

来源

2013-02-22 18:38:26 Derek

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

来源

2013-02-22 18:41:07 Pestilence

使用jQuery和媒体查询去除图像大小

回答

相关问题