html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形

一般来说,我们设定一定宽度高度的div标签,在里面放上图片,只有当图片大小尺寸符合这个宽度和高度的时候显示最佳。那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV的宽高度进行,缩放呢?其实很简单,只用设置其css样式即可,css样式如下:

.photo img

{

max-width:80px;/*这是DIV的大小*/

width:expression(this.width > 80 ? "80px" : this.width);/*实现按比例缩放*/

}

HTML中设置如下:

html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形_第1张图片

下面是完整的代码,读者可以在IE5以上的浏览器中运行:

Div里CSS控制图片按比例扩大缩小不变形

.photo img

{

max-width:120px; /*这是DIV的大小*/

width:expression(this.width > 120 ? "120px" : this.width);/*实现按比例缩放*/

}

html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形_第2张图片
html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形_第3张图片

注意:除了IE之外,其他浏览器比如Chrome、Firefox、Safari对expression这种非标准的用法并不支持。

expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,【这里的CSS属性可以是元素固有的属性,也可以是自定义属性。】是动态设置CSS属性的强大方法,但也存在着一定的危险性。

CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。

注意:

不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。CSS expression作为web时代临时解决方案的产物,在被其创建者无情的抛弃后,我们更应该摈弃这种较为丑陋的代码方式,采用更优的解放方案。

你可能感兴趣的:(html怎么设置扩大缩小不变形)