控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高；
下面两种方法自适应宽和高，zhenzhai推荐使用CSS方法；
一、CSS方法；
主
要是在CSS设置最小值和最大值(max-width: 100px; max-
height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 100 ? 100: true);)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <style type="text/css">
5 a img {
6 border: 0;
7 }
8
9 .imgthumblist {
10 margin: 0 3px;
11 padding: 0;
12 list-style: none;
13 }
14
15 .imgthumblist li {
16 float: left;
17 display: inline;
18 text-align: center;
19 background: #F0F9FF;
20 width: 108px;
21 height: 163px;
22 width: 100px;
23 height: 155px;
24 overflow: hidden;
25 border: 1px solid #B9D0ED;
26 padding: 3px;
27 margin: 3px;
28 }
29
30 .imgthumblist li.list1line {
31 height: 123px;
32 height: 115px;
33 }
34
35 .imgthumblist li.list2line {
36 height: 143px;
37 height: 135px;
38 }
39
40 .contentL .imgthumblist li {
41 margin: 0 1px 3px;
42 }
43
44 .imgthumblist p {
45 margin: 0;
46 line-height: 18px;
47 font-size: 12px;
48 }
49
50 .imgthumblist div {
51 line-height: 90px;
52 font-size: 90px;
53 height: 100px;
54 display: table;
55 }
56
57 .imgthumblist div a {
58 display: table-cell !important;
59 display: block;
60 width: 100px;
61 vertical-align: middle;
62 }
63
64 .imgthumblist div img {
65 vertical-align: middle;
66 max-width: 100px;
67 max-height: 100px;
68 width: expression(this.width >100 && this.height < this.width ? 100: true);
69 height: expression(this.height > 100 ? 100: true);
70 font-size: 10px;
71 }
72
73 @media all and (min-width: 0px) {
74 .imgthumblist div img {
75 width: 100px;
76 height: 100px;
77 }
78 }
79 /*for Opera Only*/
80 </style>
81 </head>
82 <body>
83 <div>
84 <ul class="imgthumblist">
85 <li class="list2line">
86 <div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" alt="图片名称" /></a></div>
87 <p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
88 <p class="smalltxt">图片数:1</p>
89 </li>
90 <li class="list2line">
91 <div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" alt="图片名称" /></a></div>
92 <p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
93 <p class="smalltxt">图片数:3</p>
94 </li>
95 <li class="list2line">
96 <div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" alt="特别的爱给特" /></a></div>
97 <p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
98 <p class="smalltxt">图片数:4</p>
99 </li>
100 </ul>
101 </div>
102 </body>
103 </html>
html
二、JS方法
我就不说了代码写的很清楚
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <script type="text/javascript">
5 //改变透明度参数：图片对象，透明度：1-100的值
6 function setAlpha(imgObj, opacityValue) {
7 imgObj.filters.alpha.opacity = parseInt(opacityValue);
8 }
9
10 //图片的显示大小[以宽度来限制]
11 function DrawImageW(imgObj, widthValue) {
12 var image = new Image();
13 image.src = imgObj.src;
14 if (image.width > 0 && image.height > 0) {
15 if (image.width >= widthValue) {
16 imgObj.width = widthValue;
17 imgObj.height = (image.height * widthValue) / image.width;
18 } else {
19 imgObj.width = image.width;
20 imgObj.height = image.height;
21 }
22 }
23 }
24
25 //图片的显示大小[以高度来限制]
26 function DrawImageH(imgObj, heightValue) {
27 var image = new Image();
28 image.src = imgObj.src;
29 if (image.width > 0 && image.height > 0) {
30 if (image.height >= heightValue) {
31 imgObj.height = heightValue;
32 imgObj.width = (image.width * heightValue) / image.height;
33 } else {
34 imgObj.width = image.width;
35 imgObj.height = image.height;
36 }
37 }
38 }
39 //图片的显示大小[宽高同时限制]
40 function DrawImage(imgObj, widthValue, heightValue) {
41 var image = new Image();
42 image.src = imgObj.src;
43 if (image.width > 0 && image.height > 0) {
44 if (image.height > heightValue || image.width > widthValue) {
45 var h = 0, w, wflg = false;
46 if (image.height > heightValue)
47 wflg = true;
48 if (wflg) {
49 w = widthValue;
50 h = (image.height * widthValue) / image.width;
51 }
52 if (h == 0 || h > heightValue) {
53 h = heightValue;
54 w = (image.width * heightValue) / image.height;
55 }
56 //alert(w)
57 //alert(h)
58 imgObj.width = w;
59 imgObj.height = h;
60 } else {
61 imgObj.width = image.width;
62 imgObj.height = image.height;
63 }
64 }
65 }
66
67 function zoomImg(imgObj) {
68 var zoom = parseInt(imgObj.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if (zoom > 0) imgObj.style.zoom = zoom + ‘%‘;
69 return false;
70 }
71
72 </script>
73 </head>
74 <body>
75 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" style="filter:alpha(opacity=60)" onmouseover="setAlpha(this,100)" onmouseout="setAlpha(this,60)" title="修改透明度" />
76
77 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" title="宽在100以内" />
78
79 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" title="高在100以内" />
80
81 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" title="宽高在100以内" /><br />
82
83 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" title="宽在100以内" />
84
85 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" title="高在100以内" />
86
87 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" title="宽高在100以内" /><br />
88
89 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" title="宽在100以内" />
90
91 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" title="高在100以内" />
92
93 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onmousewheel="return zoomImg(this)" title="放大缩小" />
94 </body>
95 </html>
javascript
来自:http://www.cnblogs.com/MaxIE/archive/2007/01/30/634579.html
时间： 2025-01-31 06:17:14