使用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和媒體查詢去除圖像大小

回答

相關問題