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的元素皆适用这个设定。如此应该就能看到成效了

  • 相关阅读:
    盒子的display属性
    html标签默认属性值之margin;padding值
    JS事件
    表单序列化
    2016年最后一天——前端心语
    原生JS--COOKIE
    原生JS--Ajax
    DOM,BOM
    JS面向对象
    RegExp类型,单体内置对象
  • 原文地址:https://www.cnblogs.com/freespider/p/2125708.html
Copyright © 2011-2022 走看看