通过屏幕大小删除图像大小

我想知道是否有某种方法可以在屏幕分辨率低于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

通过屏幕大小删除图像大小

回答

相关问题