CSS控制图片等比例缩放 android软件开发教程

  次阅读 来源:互联网(转载协议) 2016-03-25 16:13 我要评论(0)

我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考。

按比例缩小或者放大到某个尺寸,对于标准浏览器(如Firefox),或者最新都IE7浏览器,

直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如:

代码如下

复制代码

img{max-width:100px;max-height:100px;}

img{min-width:100px;min-height:100px;}

对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code

来实现图片的缩放

代码如下

复制代码

.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */

* html .thumbImage { /* for IE6 */

width: expression(this.width > 100 && this.width > this.height ? 100 : auto);

height: expression(this.height > 100 ? 100 : auto);

}

改写一下。

代码如下

复制代码

#content img{height: expression(this.width > 600 ? this.height = this.height * 600 / this.width : "auto");

width: expression(this.width > 600 ? "600px" : "auto");

max-width:600px;}

在IE6、IE7下可以实际大图片按比例缩小,不会出现图片变形的情况,在FF和chrome下,expression无效,但通过max-width限制图片最大宽度,使页面不会被撑开。

css代码不可能兼容所有浏览器,后来找了一个js代码完美的解决了这些问题

代码如下

复制代码

<script type="text/javascript">

function AutoResizeImage(maxWidth,maxHeight,objImg){

var img = new Image();

img.src = objImg.src;

var hRatio;

var wRatio;

var Ratio = 1;

var w = img.width;

var h = img.height;

wRatio = maxWidth / w;

hRatio = maxHeight / h;

if (maxWidth ==0 && maxHeight==0){

Ratio = 1;

}else if (maxWidth==0){//

if (hRatio<1) Ratio = hRatio;

}else if (maxHeight==0){

if (wRatio<1) Ratio = wRatio;

}else if (wRatio<1 || hRatio<1){

Ratio = (wRatio<=hRatio?wRatio:hRatio);

}

if (Ratio<1){

w = w * Ratio;

h = h * Ratio;

}

objImg.height = h;

objImg.width = w;

}

</script>

本站部分文章来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 长虹新款智能语音空调,告诉你空调也能玩Siri

    长虹新款智能语音空调,告诉你空调也能玩Siri

  • 品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

    品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

  • 第一批国家重点研发计划公布,旷视科技开启“五年行动”

    第一批国家重点研发计划公布,旷视科技开启“五年行动”

  • 让AI触手可及  Qualcomm携手创通联达推出全新终端侧AI开发套件

    让AI触手可及 Qualcomm携手创通联达推出全新终端侧AI开发套件

网友点评网友点评
阅读推荐阅读推荐

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...