CSS实现图片自动缩放
被飞天舞老兄发现我的新模板中,图片超出了范围,遮挡了侧边栏。很久很久以前喜欢发图的时候,对于这种问题往往是通过编辑器修改图片样式的高和宽,一般都不能锁定高宽比,常会导致图片变形。万一下次换模板了,内容宽度变了又会出现问题,所以我一直不怎么发图,本身也不喜欢弄图,无论截图、绘图或是找图都很麻烦。
既然图已经存在了,就不可能把它删了,折腾吧。虽然不懂CSS,但是依然能知道一点CSS很强悍,而且变得越来越强悍。搜了下CSS图片自动缩放,找到一句代码搞定这个问题:
img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
多位搞模板的老兄都不建议使用css的表达式,而该用其他方式实现。
一个就是直接设置MAX-WIDTH属性到模板内容的宽度,不用表达式判定。
再一个就是蚂蚱兄提议的隐藏掉超出部分,这个很简单,也很有效。
嗯哪,我以前也有这个问题,搜搜更健康~
这个很棒,换主题经常遇到图片不适应的问题,这个可以很好的解决了!
CSS 表达式不建议使用,一般图片过大的,我都是在外围的层中用 overflow: hidden 把超出部分隐藏掉。
怎么使用呢?img{overflow: hidden}?
.content { width: 580px; overflow: hidden }
这是文章块的宽度
这个更好,
哈哈,你在 article 里加了这个吧?首页的分类图片,发表时间都给隐藏掉了。
晕倒,完全没注意,嘿嘿
不过这个是针对IE以前的,现在主流浏览器,只要把你的 img 的 max-width 设置成外层的值一样大就行了。
多谢,改好了,IE啥的不去管它
同上,CSS 表达式不建议使用
多谢提醒,已经没用了
以前我写过一篇文章关于IE6下CSS中使用expression的性能问题,我觉得“究竟expression的性能问题有多大?我认为可以忽略不计,原因是:IE6本身就是一个早该废弃的浏览器,设计者通过HACK使其兼容已是仁至义尽,已无需再为IE6考虑性能问题。”
的确也是,没打算兼容IE了,看我博客的大都不是纯IE浏览器
嘻嘻,一直在用。挺好的
新年快乐!顺便水水
唉。css真难搞啊
我的网站上的图片,鼠标放上去也会自动缩放,我想把它取消掉
这个效果确实不错啊
牛人 这个都会 我还没学会css