手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS自动控制图片大小的代码
CSS自动控制图片大小的代码
摘要:Css防止图片尺寸过大添加如下CSS:代码如下img{max-width:800px;height:auto;}代码中的max-width:...

 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 = "点击在新窗口中查看原图"; 
}

【CSS自动控制图片大小的代码】相关文章:

自动按时段切换网页的CSS风格

CSS控制背景图像平铺实现边框阴影效果

CSS 控制因Html页面高度导致抖动的问题解决方法

CSS分页符代码

CSS书写规范及书写顺序的方法

CSS绿色导航菜单制作实例

CSS实现文字自动换行(兼容Firefox)

CSS导航菜单制作教程

CSS中基代码base.css一览

CSS 控制Html页面高度导致抖动问题的原因

精品推荐
分类导航