CSS自动控制图片大小的代码

时间:2021-04-16

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章