CSS实现图片自动缩放

飞天舞老兄发现我的新模板中,图片超出了范围,遮挡了侧边栏。很久很久以前喜欢发图的时候,对于这种问题往往是通过编辑器修改图片样式的高和宽,一般都不能锁定高宽比,常会导致图片变形。万一下次换模板了,内容宽度变了又会出现问题,所以我一直不怎么发图,本身也不喜欢弄图,无论截图、绘图或是找图都很麻烦。

既然图已经存在了,就不可能把它删了,折腾吧。虽然不懂CSS,但是依然能知道一点CSS很强悍,而且变得越来越强悍。搜了下CSS图片自动缩放,找到一句代码搞定这个问题:

img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}

多位搞模板的老兄都不建议使用css的表达式,而该用其他方式实现。

一个就是直接设置MAX-WIDTH属性到模板内容的宽度,不用表达式判定。

再一个就是蚂蚱兄提议的隐藏掉超出部分,这个很简单,也很有效。

更换主题模板

放假了,还有一大堆事情等着做。今天上午把岳母送上了回家的客车,回来陪孩子耍了一整天。晚上得空把上次在群里找 蚂蚱 兄要的模板折腾一下,前几天一直也在一点一点的弄,今天总算勉强完工,挂上来亮亮相。目前唯一不满意的就是左上那logo,我对图啊颜色之类的太不敏感了,随便搞搞先挂起,空了再学学GIMP、Photoshop之类的再来折腾。

上个模板也很满意,braxiu 兄的,看久了审美疲劳,但是不抛弃不放弃,留着看腻了这个再轮换着用。

换个模板

一直使用很经典的prowerV3模板,看久了出现审美疲劳,换一个。

折腾了半天总算改好了,喜欢无图的模板,难找满意的,这个还算不错。