CSS图片等比例缩放代码

下面为大家提供五款css图片等比例缩放代码哦，每款都有自己的特别之处，这些可以完美兼容主流浏览器的图片等比例缩放,兼容ie6,ie7,ie8,firefox等。

方法一

 .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{width: expression(this.width > 120 && this.width > this.height ?"140px" :auto);height: expression(this.height > 120 ? "140px" :auto);}/* for ie6 */

方法五

div img{width:expression(this.width > 100 && this.width > this.height ? 100 : true); height: expression(this.height > 100 ? 100 : true);}

本文属原创，转载请注明原文：https://www.zhimatong.com/jiaocheng/301.html

为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。