智睿软件_技术交流论坛 → 综合站长 → Web页面设计 → HTML建站技巧,css 让图片自适应宽度


  共有18413人关注过本帖树形打印

主题：HTML建站技巧,css 让图片自适应宽度
帅哥哟，离线，有人找我吗？
zhirui
 小大  1楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：管理员 帖子：520 积分：8740 威望：0 精华：5 注册：2009-07-07 		HTML建站技巧,css 让图片自适应宽度  发帖心情 Post By：2012-10-10 10:08:56

<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>

然后调用
中小学校网站管理系统，中小学校的宣传伙伴 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
zhirui
 小大  2楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：管理员 帖子：520 积分：8740 威望：0 精华：5 注册：2009-07-07 		  发帖心情 Post By：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>

考试管理系统，适合中小学校，驾校，技术认证考试 支持(0) 中立(0) 反对(0) 回到顶部
帅哥哟，离线，有人找我吗？
zhirui
 小大  3楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：管理员 帖子：520 积分：8740 威望：0 精华：5 注册：2009-07-07 		  发帖心情 Post By：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>
企业开源网站管理系统,中小型企业的成长伙伴 支持(0) 中立(0) 反对(0) 回到顶部
RSS2.0　　Xhtml无图版　　Xslt无图版 Copyright © 2007 - 2013 Zhirui.Net    Powered By Dvbbs Version 8.2.0