图像如果显示在一个限制了宽度的div容器中时，图像有多大，它便会显示多大,当布局小于图像大小时便会产生溢出。同样的问题在table容器中一样。
那么你会说可以在CSS中定义布局中图像的宽度。那么如果图像小于布局的宽度时，图像便会被拉伸变形。那么有什么好的办法让这个图像即不会溢出，又能保持它原来的大小呢？这个时候我们可以用CSS的max-width方法来限制图像的最大宽度解决这个问题，具体用法就是:
.layout{width:600px;} .layout img{max-width:600px;height:auto;}/*如果不希望图片会因为限制宽度而变形的话，那么把高度设置为自适应*/
如此，问题解决，但是并不是所有问题都解决了，浏览器兼容性是永远都是前段工程师的噩梦，因为该死的IE6并不对这个属性提供支持。所以我们不得不针对IE6做一些处理。接下来就是只有IE支持的属性值：expression
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
用法是expression(statement),例如我们上面的CSS，我们需要在规则中加入
.layout{width:600px;} .layout img{max-width:600px;width:expression(this.width > 600 ? 600: true);height:auto;}/*this是指当前元素‘.’操作符中文代表中文意义的‘的’,width字面翻译宽度，后面是三元判断表达式，意思是说当img的宽度大于600时，img的宽等于600，否则不进行任何操作*/
Leave a Reply