img图片自适应宽和高[转]

时间：2022-11-16 15:56:36

控制缩略图常见的是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);)

img图片自适应宽和高[转]img图片自适应宽和高[转]
  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方法
我就不说了代码写的很清楚

img图片自适应宽和高[转]img图片自适应宽和高[转]
 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" onload="javascript:DrawImageW(this,100);" 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" onload="javascript:DrawImageW(this,100)" title="宽在100以内" />
78 
79     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" />
80 
81     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /><br />
82 
83     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" />
84 
85     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" />
86 
87     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /><br />
88 
89     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" />
90 
91     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImageW(this,100)" title="高在100以内" />
92 
93     <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImage(this,100,100)" onmousewheel="return zoomImg(this)" title="放大缩小" />
94 </body>
95 </html>
javascript

来自:http://www.cnblogs.com/MaxIE/archive/2007/01/30/634579.html

标签：

相关文章