CSS图片等比例缩放代码
<!--
下面我要为你提供五款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 div网页折叠层
- 下一篇：css 图片等比例缩放
