Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > CSS完美解决img图片最大宽度和最大高度的控制,兼
隐藏/显示侧边栏

CSS完美解决img图片最大宽度和最大高度的控制,兼

2013-09-22 15:28    来源:http://www.cgner.com    责任编辑:admin    字号【
有时候我们需要一个图片在多个地方调用,这个时候的宽和高我们就不能固定下来!自适应宽高!这个时候max-width和max-height就能起到这种效果了~~~设置最大宽度和最大高度!防止图片溢出或超出范围。
当然在IE6这两个属性是没有效果的,此时要用到为IE6专门制作的”配方“。

假定要对Class为demo下的img进行控制,CSS代码部分如下:
.demo img { max-width:400px; width:expression(document.body.clientWidth>400?"400px":"auto"); overflow:hidden; } 代码解释:

.demo img基本的css标签调用,

max-width:400px; 设置非IE6的其他浏览器的最大宽度为400px。注意这里不要设置高度了,才能自动缩放。

width:expression(document.body.clientWidth>400?"400px":"auto");针对IE6设置的最大宽度控制,当宽度大于400px时,宽度设置为400px.如果小于或等于400px,则按照自身的宽度 - 原图宽度。、

overflow:hidden; 超出部分隐藏,避免变形!

设置最大高度代码如下:
.class img { max-height:400px; width:expression(document.body.clientHeight>400?"400px":"auto"); overflow:hidden; } 到此完美解决不用JS控制最大宽度和最大高度了!是不是很爽!!!

更多
Tags 标签:
责任编辑:admin
  • 上一篇:没有了
  • 下一篇:你真的精通CSS吗?来挑战一下吧,勇士!
  • 设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |