关于上传的图片如何实现等比例缩放

html-css020

关于上传的图片如何实现等比例缩放,第1张

从别人那贴的，你改改看符合你的要求么

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>图片垂直居中,自动缩略图</title>

<meta name="author" content="calent,calent_zero@yahoo.com.cn" />

</head>

<style type="text/css">

<!--

*{padding:0margin:0}

body{font-size:12pxtext-align:centerfont-family:arial,sans-serif}

#wrap{width:800pxmargin:20px autotext-align:left}

#wrap ul{list-style:none}

#wrap li,#wrap .pic{width:130pxheight:100px}

#wrap li{margin:8pxfloat:leftdisplay:inlineoverflow:hiddenborder:1px solid #000}

.pic{text-align:centerdisplay:table-cellvertical-align:middleborder:1px solid #cccfont-size:88px}

.pic img{vertical-align:middle}

#copy{clear:bothpadding:5px}

-->

</style>

<script type="text/javascript">

<!--

/*

功能：图片等比例缩放

目标:ImgTag

图片宽度:FitWidth

图片高度:FitHeight

*/

var FitWidth = 130

var FitHeight = 110

function ResizePic(ImgTag)

{

var image = new Image()

image.src = ImgTag.src

if(image.width>0 &&image.height>0){

if(image.width/image.height >= FitWidth/FitHeight){

if(image.width >FitWidth){

ImgTag.width = FitWidth

ImgTag.height = (image.height*FitWidth)/image.width

}

else{

ImgTag.width = image.width

ImgTag.height = image.height

}

}

else{

if(image.height >FitHeight){

ImgTag.height = FitHeight

ImgTag.width = (image.width*FitHeight)/image.height

}

else{

ImgTag.width = image.width

ImgTag.height = image.height

}

}

}

}

//-->

</script>

<body>

<div id="wrap">

<ul>

<li><div class="pic"><img src="img/pic1.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

<li><div class="pic"><img src="img/pic2.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

<li><div class="pic"><img src="img/pic3.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

<li><div class="pic"><img src="img/pic4.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

<li><div class="pic"><img src="img/pic5.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

<li><div class="pic"><img src="img/pic6.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

<li><div class="pic"><img src="img/pic7.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

<li><div class="pic"><img src="img/pic8.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>

</ul>

<div id="copy">© 2008 Design by calent</div>

</div>

</body>

</html>

Emoji 是可以插入文字的图形符号。

它是一个日语词， e 表示"絵"， moji 表示"文字"。连在一起，就是"絵文字"。

Emoji 在上个世纪90年代，由日本电信商引入服务，最早用于在短消息之中插入表情。2007年，苹果公司的 iPhone 支持了 Emoji，导致它在全世界范围的流行。

早期的 Emoji 是将一些特定的符号组合替换成图片，比如将 :) 替换成