問題：?在web中，如何把一張500*800 的圖, 顯示成180*110 的小圖？
方法:? a.? 利用腳本控制. 在onload 里加個函數.?? ?1<img?src?="Image/3pic2.gif"?style="border:?0"?width?="180"?onload="DrawImage(this);"?/><?script?type="text/javascript">?
?2
?3function?DrawImage(ImgD){?
?4????var?image=new?Image();?
?5????image.src=ImgD.src;?
?6????alert(image.width/image.height);
?7????if(image.width>0?&&?image.height>0){
?8??????if(image.width/image.height>=?180/110){?
?9???????????if(image.width>180){
10????????????ImgD.width=180;?
11????????????ImgD.height=image.height*110)/image.width;?
12???????????}else{?
13????????????ImgD.width=image.width;
14????????????ImgD.height=image.height;?
15???????????}?
16???????/*ImgD.alt="bigpic"??*/
17??????}?
18??????else{?
19???????????if(image.height>110){
20????????????ImgD.height=110;?
21????????????ImgD.width=(image.width*110)/image.height;?
22???????????}else{?
23????????????ImgD.width=image.width;
24????????????ImgD.height=image.height;?
25???????????}?
26????????/*ImgD.alt="bigpic"??*/?
27?????}?
28??}
29}
30</?script?>
31

注意,這里設計 width="180", 注意這里最好限定, 如果不限定加載圖時會生成原來大小的圖,然后再縮小 .載入

時屏幕會閃動
?
? b. 利用CSS 控制
?????? 1??img{
2??????????????max-width:40px;?//IE7?Firefox
3????????????? with:express(this>500)?40px?//IE6?
4???????????????over-flow:hidden;?
5?????????}????????
討論的話題： 1. 頁面的大小有變小嗎？頁面加載速度呢？
???????????????????????? 2. 物理上把圖片變小，效果如何？

轉載于:https://www.cnblogs.com/suryani/archive/2007/08/15/854832.html

總結

以上是生活随笔為你收集整理的入门话题1. 在Web中控制图的显示外观？把一张500*800 的图, 显示成180*110 的小图....的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。