CSS图片等比例缩放代码

<!–
下面我要为你提供五款 图片等比例缩放代码哦,第一款都有自己的特别之处,这些可以完美兼容主流浏览器的图片等比例缩放,兼容ie6,ie7,ie8,firefox等。
<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<title>css图片等比例缩放代码</title>
<style type=”text/css”>

.thumbimg { max-width: 530px; max-height: 530px; }/* for firefox & ie7 */

* html .thumbimg {width: expression(this.width > 530 && this.width > this.height ? “530px” :auto); height:expression(this.height >530 ? “530px”:auto);}/* for ie6 */

//方法二

img {

width:expression(this.offsetwidth>160 ? 160 : true); /*自行修改图片宽度*/

height:expression(this.offsetheight>180 ? 180 : true); /*自行修改图片高度*/

}

//方法三

div {
display: table – cell;
/*把块元素设置为表格元素*/
vertical – align: middle;
/*设置水平居中*/
text – align: center;
/* 针对ie的hack*/
* display: block; * font – size: 180px;
/*把字体大小设置为层的高度*/
* font – family: arial;
/*防止非utf-8引起的hack失效问题*/
width: 160px;
/*自行修改层宽度*/
height: 180px;
/*自行修改层高度*/
border: #ccc 1px solid;
/*显示层边框*/
}div img {
vertical – align: middle;
/*设置图片垂直居中*/
width: expression(this.width > 160 ? 160 : true);
/*自行修改图片宽度*/
height: expression(this.height > 180 ? 180 : true);
/*自行修改图片高度*/
}

//方法四

#thumbimaged img

{

max-width: 120px;

max-height: 140px;

}

/* for firefox & ie7 */

#thumbimaged img

{

/* for ie6 */

width: expression(this.width > 120 && this.width > this.height ?”140px” :auto);

height: expression(this.height > 120 ? “140px” :auto);

}

方法五

width:expression(this.width > 100 && this.width > this.height ? 100 : true); height: expression(this.height > 100 ? 100 : true);

</style>
</head>

<body>
</body>
</html>

CSS图片等比例缩放代码

相关文章:

你感兴趣的文章:

标签云: