CSS实现图片自动缩放

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

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

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

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

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

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

Published by 阿飞 on
Tags: css, 模板

20 条评论

  1. 嗯哪,我以前也有这个问题,搜搜更健康~

  2. 这个很棒,换主题经常遇到图片不适应的问题,这个可以很好的解决了!

  3. 蚂蚱 蚂蚱

    CSS 表达式不建议使用,一般图片过大的,我都是在外围的层中用 overflow: hidden 把超出部分隐藏掉。

    1. 怎么使用呢?img{overflow: hidden}?

      1. 蚂蚱 蚂蚱

        .content { width: 580px; overflow: hidden }
        这是文章块的宽度

          1. 蚂蚱 蚂蚱

            哈哈,你在 article 里加了这个吧?首页的分类图片,发表时间都给隐藏掉了。

        1. 晕倒,完全没注意,嘿嘿

  4. 蚂蚱 蚂蚱

    不过这个是针对IE以前的,现在主流浏览器,只要把你的 img 的 max-width 设置成外层的值一样大就行了。

    1. 多谢,改好了,IE啥的不去管它

  5. 同上,CSS 表达式不建议使用

    1. 多谢提醒,已经没用了

  6. 以前我写过一篇文章关于IE6下CSS中使用expression的性能问题,我觉得“究竟expression的性能问题有多大?我认为可以忽略不计,原因是:IE6本身就是一个早该废弃的浏览器,设计者通过HACK使其兼容已是仁至义尽,已无需再为IE6考虑性能问题。”

    1. 的确也是,没打算兼容IE了,看我博客的大都不是纯IE浏览器

  7. 嘻嘻,一直在用。挺好的

  8. 蚂蚱 蚂蚱

    新年快乐!顺便水水

  9. 我的网站上的图片,鼠标放上去也会自动缩放,我想把它取消掉

  10. 这个效果确实不错啊

  11. 呼噜 呼噜

    牛人 这个都会 我还没学会css