CSS图片等比例缩放代码

作者 : MOOMOO 本文共1313个字,预计阅读时间需要4分钟 发布时间: 2022-04-25 共15人阅读

下面为大家提供五款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);}
1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 本站客服QQ:4387159,唯一购买官网:MooMoo.TOP!
3. 盗版,破解有损他人权益和违法作为,请各位会员支持正版!
MooMoo » CSS图片等比例缩放代码

常见问题FAQ

是否支持共享资源赚外快?
本站支持任何人上传资源,一经采用即可展示,客户下单既有80%的提成。
可以免费教技术吗?
大家可以加群进行探讨共同进步,重点问题管理员会进行解答。
我是小白要怎么学习?
加群后做到不耻下问,看文章学习演示就能成为大佬。

发表评论