解决图片显示比例匹配问题，我个人建议用js重新定义长宽

最新推荐文章于 2024-03-29 13:47:23 发布

happylifeng

最新推荐文章于 2024-03-29 13:47:23 发布

阅读量159

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/happylifeng/article/details/84467270

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/ok7758521ok/article/details/1642557

<HTML>
<HEAD>
<TITLE>演示图片等比例缩小</TITLE>
<script>
function Wa_SetImgAutoSize(img)
{
//var img=document.all.img1;//获取图片
var MaxWidth=200;//设置图片宽度界限
var MaxHeight=100;//设置图片高度界限
var HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比
var WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比
//if(img.offsetHeight>1) alert(img.offsetHeight);
if(img.readyState!="complete"){
 return false;//确保图片完全加载
}

if(img.offsetWidth>MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight>MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}

function CheckImg(img)
{
 var message="";
 var MaxWidth=1;//设置图片宽度界限
 var MaxHeight=1;//设置图片高度界限
 
 if(img.readyState!="complete"){
  return false;//确保图片完全加载
 }
 if(img.offsetHeight>MaxHeight) message+="/r高度超额："+img.offsetHeight;
 if(img.offsetWidth>MaxWidth) message+="/r宽度超额："+img.offsetWidth;
 if(message!="")
 {
 Wa_SetImgAutoSize(img);
 }
}
</script>
</HEAD>
<BODY>
<img src="http://video.5jia1.com/test/ndata//p_album/p_album/1/35/100555//36/s_1_p_album_98_0485160001168769990.jpg" border=0 id="img1" οnlοad="CheckImg(this);">
<br>

</BODY>
</HTML>

happylifeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决图片显示比例匹配问题，我个人建议用js重新定义长宽

http://blog.csdn.net/ok7758521ok/article/details/1642557 &lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;演示图片等比例缩小&lt;/TITLE&gt;&lt;script&gt;function Wa_SetImgAutoSize(img){//var img=document.a...
复制链接

扫一扫

专栏目录