让图片自适应大小的方法
2. 用css調用expression控制圖片溢出后的大小；
（http://www.blog.edu.cn/user1/7987/archives/2006/1440861.shtml ）
3. 用js寫函數控制圖片溢出后的大小；
其中后兩種都是javascript在起作用，但是工作原理不同，css中調用expression可以解決這個問題，但是解決得不好，因為如果頁面中圖片一多，expression中的語句會不斷被調用，非常耗費客戶端內存，容易導致瀏覽器假死；而直接用javascript，在頁面onload的時候就可以輕松解決這個問題，而且只調用一次，比起expression真是好得太多，程序很簡單，下面是個簡單的例子，我假設這個頁面圖片寬度不能超過200px，而實際圖片寬度是550px：
<body>
<img??id="achome"?src="http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg"?/>
</body>
<script>
??? var imageArr=document.getElementById(controlID);
??? var imageRate = imageArr.offsetWidth / imageArr.offsetHeight;???
???
??? if(imageArr.offsetWidth > maxWidth)
??? {
??????? imageArr.style.width=maxWidth + "px";
??????? imageArr.style.Height=maxWidth / imageRate + "px";
??? }
???
??? if(imageArr.offsetHeight > maxHeight)
??? {
??????? imageArr.style.width = maxHeight * imageRate + "px";
??????? imageArr.style.Height = maxHeight + "px";
??? }
</script>
?
?
?
?
?
下面是圖片自適應的:?
?
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/html; charset=gb2312"
/>
<title>css2.0 VS ie</title>
<style
type="text/css">
<!--
body {
?font-size: 12px;
?text-align:
center;
?margin: 0px;
?padding: 0px;
}
#pic{
? margin:0
auto;
? width:800px;
? padding:0;
? border:1px solid #333;
?
}
#pic img{
???
max-width:780px;
?width:expression(document.body.clientWidth > 780?
"780px": "auto" );
?border:1px dashed
#000;
?}
-->
</style>
</head>
<body>
<div
id="pic">
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg"
alt="感謝blueidea被我盜鏈圖片！"/>
</div>
</body>
</html>
?
?
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/html; charset=gb2312"
/>
<title>css2.0 VS ie</title>
<style
type="text/css">
<!--
body {
?font-size: 12px;
?text-align:
center;
?margin: 0px;
?padding: 0px;
}
#pic{
? margin:0
auto;
? width:800px;
? padding:0;
? border:1px solid #333;
?
}
#pic img{
???
max-width:780px;
?width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10?
"780px": "auto" );
?border:1px dashed
#000;
?}
-->
</style>
</head>
<body>
<div
id="pic">
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg"
alt="感謝blueidea被我盜鏈圖片！"/>
</div>
</body>
</html>
?
?
轉載于:https://www.cnblogs.com/cxd4321/p/3284770.html
總結
以上是生活随笔為你收集整理的让图片自适应大小的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： poj 2914(stoer_wange
- 下一篇： JavaScript：零星知识