zoukankan      html  css  js  c++  java
  • 图片自动随div大小改变

    做网页、论坛贴图、写部落格。只要有需要上传图片的机会,就一定常碰到这问题。一旦不小心上传一个大于版面的图片,轻则内容被盖住,重则排版全乱掉,画面惨不忍睹。

    一般的css处理方法都是靠 over-flow:hidden; 来达成的。但这样做有个缺点,跑出去的内容会被隐藏起来。如果文字跟着被隐藏的话就看不到了。

    在这里提供一个同样用css的解决办法吧,能够自动调整图片大小。其实在Mozilla系列浏览器中都支持Max与Min的大小设定,只要css做这样处理,就能限定任何元素的最大或最小长宽。

    不过伟大的Microsoft硬是不支持这指令,我们只好拉长程序代码啦,整个代码变得落落长,因为插入了javascript在里面。

    请先打开你的网站css档案,输入下面的代码:

     
    .img {
      max-600px;
      myimg:expression(onload=function(){
      this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
    }

    你可以将600设为任何你要的宽度

    若只想限定某个区域中的图片,请输入:

     
    .#div img {
      max-600px;
      myimg:expression(onload=function(){
      this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
    }

    #div就是那个区域的id,意思是#div底下所有卷标为img的元素皆适用这个设定。如此应该就能看到成效了

  • 相关阅读:
    ubuntu远程windows桌面
    spring boot 给返回值加状态 BaseData
    spring boot 拦截异常 统一处理
    IntelliJ IDEA spring boot 远程Ddbug调试
    IntelliJ IDEA 常用插件
    spring boot 请求地址带有.json 兼容处理
    spring boot 接口返回值去掉为null的字段
    spring boot 集成disconf
    Spring boot 自定义拦截器
    Linux下安装MySQL
  • 原文地址:https://www.cnblogs.com/freespider/p/2125708.html
Copyright © 2011-2022 走看看