CSS实现图片自动缩放
被飞天舞老兄发现我的新模板中,图片超出了范围,遮挡了侧边栏。很久很久以前喜欢发图的时候,对于这种问题往往是通过编辑器修改图片样式的高和宽,一般都不能锁定高宽比,常会导致图片变形。万一下次换模板了,内容宽度变了又会出现问题,所以我一直不怎么发图,本身也不喜欢弄图,无论截图、绘图或是找图都很麻烦。
既然图已经存在了,就不可能把它删了,折腾吧。虽然不懂CSS,但是依然能知道一点CSS很强悍,而且变得越来越强悍。搜了下CSS图片自动缩放,找到一句代码搞定这个问题:
img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
多位搞模板的老兄都不建议使用css的表达式,而该用其他方式实现。
一个就是直接设置MAX-WIDTH属性到模板内容的宽度,不用表达式判定。
再一个就是蚂蚱兄提议的隐藏掉超出部分,这个很简单,也很有效。