<!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>
时间： 2024-12-22 10:32:20