展会信息港展会大全

CSS图片等比例缩放代码 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:31:42   浏览:1949次  

导读:下面我要为你提供五款css 图片等比例缩放代码哦,第一款都有自己的特别之处,这些可以完美兼容主流浏览器的图片等比例缩放,兼容ie6,ie7,ie8,firefox等。<!doctype ht...

下面我要为你提供五款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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港