以文本方式查看主题

-  智睿软件_技术交流论坛  (http://zhirui.net/bbs/index.asp)
--  Web页面设计  (http://zhirui.net/bbs/list.asp?boardid=33)
----  HTML建站技巧,css 让图片自适应宽度  (http://zhirui.net/bbs/dispbbs.asp?boardid=33&id=1455)
--  作者：zhirui
--  发布时间：2012-10-10 10:08:56
--  HTML建站技巧,css 让图片自适应宽度
<script language="JavaScript">
    <!--
    var flag=false;
    function DrawImage(ImgD){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= ImgD.width/ImgD.height){
    if(image.width>ImgD.width){
    ImgD.width=ImgD.width;
    ImgD.height=(image.height*ImgD.width)/image.width;
    }
    else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    else{
    if(image.height>ImgD.height){
    ImgD.height=ImgD.height;
    ImgD.width=(image.width*ImgD.height)/image.height;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    }
    }
    //-->
    </script>

然后调用
--  作者：zhirui
--  发布时间：2012-10-10 13:50:49
--  
<style>
.cnt{text-align:center;width:600px;height:350px;margin:0 auto;border:1px solid #ddd;}
</style>
</head>
<body>
<div class="cnt">
<img id="img" src="aa.jpg" />
</div>
<script>
window.onload = function() {
var img = document.getElementById(\'img\'),
/**
* 图片按比例自适应缩放
* @param img {Element} 用户上传的图片
* @param maxWidth {Number} 预览区域的最大宽度
* @param maxHeight {Number} 预览区域的最大高度
*/
resizeImg = function(img, maxWidth, maxHeight){
var w = img.width,
h = img.height;
// 当图片比预览区域小时不做任何改变
if(w < maxWidth && h < maxHeight) return;
// 当实际图片比例大于预览区域宽高比例时
// 缩放图片宽度，反之缩放图片宽度
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight;
};
resizeImg(img, 500, 300);
}
</script>
--  作者：zhirui
--  发布时间：2012-10-10 15:17:04
--  

<div id="showbox">
<img src="aa.jpg" />
<img src="aa.jpg" />
</div>


<script type="text/javascript">
function $(e){return document.getElementById(e)}

var imgs = $(\'showbox\').getElementsByTagName(\'img\');
for(var i=0;i<imgs.length;i++){
    if (imgs[i].width > 600){
        imgs[i].width = 600
    }
}

</script>