CSS 定义IMG样式解决页面被撑变形的问题

当网页中插入的过大的图片的时候,经常会撑破网页

JS是可以解决的,但是用CSS解决会比较简单点。

CSS代码如下:

CSS:

.entry img {
max-width: 520px;
width:e­xpression(width>520?”520px”:”width”);
}

另外记几个限制宽度的CSS样式

IE7以上 和 Firefox浏览器(限定宽度大于700小于1024)
min-width:700px;
max-width:1024px;

IE7以下
最小宽度为700
width:e­xpression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? “770″ : “auto”) : “770px”) : “auto” );
最大宽度为1024
width:e­xpression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? “1024″ : “auto”) : “1024px”) : “auto” );

限制高度和宽度都不大于400
width:e­xpression(onload=function(){if (this.offsetWidth>this.offsetHeight){this.style.width=(this.offsetWidth > 400)?”400px”:”auto”}{this.style.height=(this.offsetHeight < 400)?”auto”:”400px”}});

Categories: 设计布局

2 Comments

  • 冬日暖阳 says:

    我是冬日暖阳,触摸冬日暖阳,有空多交流一下,感觉你收集的资料和代码还挺多的。

  • baizoo says:

    经常会忘记一些东西,在这里记录一下忘记了的时候可以来看看。多交流 :)

Leave a Comment