CSS图片等比例缩放代码

2016-03-02    编辑:Crese     点击(
下面我要为你提供五款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>