`
yunfuby1
  • 浏览: 10248 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

用css控制div的最大最小高度和宽度,实现图片自适宽度

css 
阅读更多

在网页布局的时候,很多时候我们需要控制图片或者某个div的最大高度/宽度,最小高度/宽度,以防止它们破坏网页的整体结构 ,这个时候可以使用下面的css进行控制。

  1.  * 最小?度 */
  2. .min_width{min-width:300px;
  3.    /* sets max-width for IE */
  4.    _width:expression(document.body.clientWidth < 300 ? "300px" : "auto");
  5. }
  6.  
  7. /* 最大?度 */
  8. .max_width{
  9.    max-width:600px;
  10.    /* sets max-width for IE */
  11.    _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
  12. }
  13.  
  14. /* 最小高度 */
  15. .min_height{
  16.    min-height:200px;
  17.    /* sets min-height for IE */
  18.    _height:expression(this.scrollHeight < 200 ? "200px" : "auto");
  19. }
  20.  
  21. /* 最大高度 */
  22. .max_height{
  23.    max-height:400px;
  24.    /* sets max-height for IE */
  25.    _height:expression(this.scrollHeight > 400 ? "400px" : "auto");
  26. }
  27.  
  28. /* 最大最小?度 */
  29. .min_and_max_width{
  30.    min-width:300px;
  31.    max-width:600px;
  32.    /* sets min-width & max-width for IE */
  33.    _width: expression(
  34.       document.body.clientWidth < 300 ? "300px" :
  35.         ( document.body.clientWidth > 600 ? "600px" : "auto")
  36.    );
  37. }
  38.  
  39. /* 最大最小高度 */
  40. .min_and_max_height{
  41.    min-height:200px;
  42.    max-height:400px;
  43.    /* sets min-height & max-height for IE */
  44.    _height: expression(
  45.       this.scrollHeight < 200 ? "200px" :
  46.         ( this.scrollHeight > 400 ? "400px" : "auto")
  47.    );
  48. }
  49. 原文:http://www.cnzheyu.com/news/hangye/hy-23-655.html
分享到:
评论

相关推荐

    CSS控制div宽度最大宽度/高度和最小宽度/高度的方法

    在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟大家分享...

    CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法

    CSS设置页面最大最小宽度 兼容ie6/7/8/9,FF,chrome,sogou等浏览器 设置最小宽度 div { width:100%; min-width:1000px; width:expression_r(document.body.clientWidth &lt; 1000&gt; 1200 ? "1200px": "auto" ); } ...

    使用div+css开发个人网站毕业设计.doc

    10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...

    详解css中inline-block的最小宽度值

    昨天看到width在行内块元素中,如果设置其宽度为0,该元素标签里面的内容存在着一个最小的宽度,最小的宽度根据中文字符和英文字符又有所区别,中文字符是以每个汉字来分割,英文字符是以英文单词来分割。...

    设置一个div层的最小宽度或最小高度

    min-width与max-width后面均跟具体数字+html单位 min-width:50px 最小宽度为50px max-width:50px 最大宽度为50px CSS样式结构 复制代码代码如下: div{min-width:50px} div{max-width:50px}

    通过CSS样式设置网页的最小宽度以将宽度固定为600px为例

    通过CSS样式设置网页的最小宽度,下面的样式将网页的最小宽度固定为600px html代码,将所有的内容都放到id=container的容器内 复制代码代码如下: &lt;body&gt; &lt;div id=”container”&gt; CSS样式代码,指定最小宽度...

    Js CSS仿Windows桌面菜单及图标的效果.rar

    Js CSS仿Windows桌面菜单及图标的效果,用到了不少Ajax操作相关技巧,table 目录下是做得稍复杂一点的类似桌面效,test 目录是简单的,自己看吧 ... 1 样式,1显示关闭/最小化/最大化 2无关闭 3无最大化 4仅有关闭

    css入门笔记

    min-width:最小宽度 max-width:最大宽度 height:高度 取值:px % min-height:最小高度 max-height:最大高度 3.页面中允许修改尺寸的元素 1.所有的块元素允许修改尺寸 ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2...

    HTML5&CSS3网页制作:元素的类型.pptx

    所有块状元素都可以定义自己的宽度和高度; 作为其他元素的容器,可以容纳其他内联和块状元素。 描述 示例 &lt;li&gt;1 &lt;li&gt;2 &lt;li&gt;3 块级元素总是从新的一行开始并占据可用的全宽度 块状元素 常见的块状元素 — &lt;div&gt;...

    让IE6支持兼容min-width、max-width CSS样式属性的方法

    我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定宽度范围值,有时需要设置一个最小宽度,接下来由DIVCSS5为大家总结的解决IE6不支持min-width和不支持max-width的方法。以下为CSS 宽度之IE6支持...

    asp.net CheckBoxList各项最小宽度CSS样式(兼容性good)

    ASP.NET中,CheckBoxList里的选择都是自动宽度的,属性时没有设置各项宽度的设置,在IE10、遨游4极速模式及兼容模式下均可正确显示最小宽度,此样式除了用于CheckBoxList外,也可用于DIV等

    46种常见的浏览器兼容性问题大汇总

    12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16. 高度不适应 3 17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. ...

    CSS中的expresssion的使用及注意事项

    960px:)},该样式是使IE6中该div的最小宽度为960px 说明:expression只试用于IE浏览器 注意:能不使用expression就最好不用,原因:expression的计算频率很高,从而对页面性能有影响。不仅仅是在页面显示和缩放时,...

    CSS属性探秘系列(五):min-width

    一、基本含义min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。min-width 的值会同时覆盖 max-width 和 width。 二、可取值常用百分比、固定px|em|ex等,其他属性值如max-...

    JavaScript网页特效范例宝典源码

    实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10...

    商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

    3)修正保存远和图片到本地功能在IE6及IE7的提交BUG。 4)修正上传图片界面中对齐方式不能生效的BUG! 2010/01/15 Version 6.1.4 For VS2005/2008 Updates: 1)加入保存远程图片到本地的功能图标到菜单栏,配置代码为...

Global site tag (gtag.js) - Google Analytics