css如何自动控制图片大小?css实现自动调整图片大小

发布时间:2019-08-07编辑:脚本学堂
如何用css样式自动控制图片大小呢,这里介绍下css实现自动调整图片大小的方法,并提供了兼容浏览器的css样式写法,共大家学习参考。

css如何防止图片尺寸过大?

css样式: 
 

img { 
max-width: 800px; 
height: auto; 
}

代码中max-width:800px限制图片的最大宽度为800像素,而hight:auto很关键,可以保证图片有正确的长宽比,不至于因为被调整宽度而变形。

例子,wordpress自动调整图片大小。

1、打开“样式表 (style.css)”文件,然后在 p img{ 或类似的地方添加下列代码(可以将所有550改成你想要的宽度)
代码:
 

p img{
max-width: 550px;
width: expression(this.width > 550 ? "550px" : true);
height: auto;
}

2、清空缓存即可。

3、同样对于某些老版本IE不支持。

想兼容所有浏览器jq或js是最好的办法:
 

复制代码 代码示例:
//  方法:setSelectreadonly  用于设定极select控件ReadOnly,
//这个一个模拟只读不是真的只读
//使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件
//示例:< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ;
//  create by sl 
// ---------------------------------------------------
function ImgAutoSize(imgD,FitWidth,FitHeight) 
{
var image1=new Image(); 
image1.onload = function ()
{
if(this.width>0 && this.height>0) 

if(this.width/this.height>= FitWidth/FitHeight) 

if(this.width>FitWidth) 

imgD.width=FitWidth; 
imgD.height=(this.height*FitWidth)/this.width; 

else 

imgD.width=this.width; 
imgD.height=this.height; 


else 

if(this.height>FitHeight) 

imgD.height=FitHeight; 
imgD.width=(this.width*FitHeight)/this.height; 

else 

imgD.width=this.width; 
imgD.height=this.height; 


}
image1 = null;
}
image1.src=imgD.src; 
imgD.style.cursor = 'hand';
imgD.onclick= function(){openWin(this.src,'imgphoto',600,400)};
imgD.title = "点击在新窗口中查看原图";
}