通過屏幕大小刪除圖像大小

我想知道是否有某種方法可以在屏幕分辨率低於980像素時刪除圖像寬度和高度？通過jQuery或什麼？通過屏幕大小刪除圖像大小

圖片是這樣的：

<img width="477" height="299" src="/uploads/2012/01/415.jpg" class="attachment-portfolio2 wp-post-image"/>

謝謝

來源

2013-03-01 Chead

你已經標記了媒體查詢。看起來像這就是你所需要的。 https://developer.mozilla.org/en/docs/CSS/Media_queries – techfoobar 2013-03-01 18:38:05

你在想IE9以下嗎？否則媒體查詢將做。 – 2013-03-01 18:38:58

你是什麼意思'刪除'？他們有效地佔用所有可用寬度？刪除寬度和高度將導致它們恢復到其原始大小...此外，屏幕分辨率不是以像素爲單位進行衡量的，我假設您是指屏幕寬度？ – BenM 2013-03-01 18:39:09

您可以使用jQuery的removeAttr()方法：

var images; 

$(function() { 
    images = $('img.wp-post-image'); 
    removeSize(); 
}); 

$(window).resize(removeResize); 

function removeSize() 
{ 
    if($(window).width() < 980 && images.length > 0) 
    { 
     images.removeAttr('width').removeAttr('height'); 
    } 
}

來源

2013-03-01 18:43:12 BenM

這是正確的答案，應該標記爲如此。我可能做的不同的唯一事情是在你的if語句中發生了什麼。我知道OP詢問了如何去除圖像的高度/寬度，但似乎是一個糟糕的解決方案，而不是將高度/寬度設置爲auto或計算值。讓它恢復默認似乎是駭人的，因爲我不是真正操縱元素 – iAmClownShoe 2013-03-01 18:52:46

我知道，但OP希望圖像返回到默認值。看到他的評論。 – BenM 2013-03-01 19:03:27

我知道我讀過它，但這並不意味着他知道他在做什麼。 – iAmClownShoe 2013-03-01 19:14:03

您可以使用下面的CSS：

/* for all screens in general */ 
.wp-post-image { 
    width: 477px; 
    height: 299px; 
} 

/* specifically for screens smaller than (or equal to) 980px */  
/* make sure this comes *after* the general rule */ 
@media (max-width: 980px) { 
    .wp-post-image { 
    width: auto; 
    height: auto; 
    } 
}

來源

2013-03-01 18:40:58 techfoobar

這看起來會起作用。一個編程方法是在css中聲明高度/寬度，並在javascript中將這些值更改爲在屏幕變得小於980時自動調整。在窗口上綁定.resize（）事件，並使回調函數檢查當前寬度，然後它變得更小，使用.css（）將寬度和高度值更改爲自動或任何你想要的。 – iAmClownShoe 2013-03-01 18:47:31

通過屏幕大小刪除圖像大小

回答

相關問題