今天做了一个很简单的功能,用js/jquery让图片等比缩放;
网站内容页的图片有时候很大。会超出内容页的宽。然后呢在添加图片的时候,会写入宽和高的值。
我就用css限制了图片的最大宽度。
[code lang=”css”]
.post .entry-content img {
max-width: 543px;
}
[/code]
这对于主流浏览器来说已经解决了问题。可是ie下不行,因为图片这样的:
《img src=”” width=”1200″ height=”700″>
这里已经写了绝对宽和高。所以ie下变形了。宽度是css强制变为 543px 可高没变
于是就拉长了!
好吧,现在看js解决方案:
[code lang=”js”]
jQuery(".post .entry-content img").each(function(){
var imgw = jQuery(this).attr("width");
var imgh = jQuery(this).attr("height");
var autoh = (imgh*543)/imgw;//计算出等比例的高度
if(imgw>543){
jQuery(this).attr({"width":"543",height:autoh});//写入图片中。
}
});
[/code]
这样就搞定了!