ie下调整图片长宽的问题

最新推荐文章于 2020-07-23 16:09:45 发布

i_saw_you

最新推荐文章于 2020-07-23 16:09:45 发布

阅读量596

点赞数

文章标签： ie function 测试 div url c

本文链接：https://blog.csdn.net/i_saw_you/article/details/7518783

版权

应同事要求,做了个展示图片的网页,来协助他用c++写的程序展示图片.页面全部用js+css静态实现,代码如下

<html>
<head>
<style>
* {margin: 0;}
div {text-align:center;}
</style>
</head>
<body>
<div>
<img src="res/waitAni1.gif" id="loading"/></div>
<div>
<img src="" id="show" style="visibility:hidden;"/>
</div>
<script>
 var urlarg ={};
 var img = document.getElementById('show');
 var maxHeight = '600';
 var maxWidth = '800';
function getarg()
{
	var url = decodeURI(window.location.href);
	var allargs = url.split("?")[1];
	var args = allargs.split("&");
	for(var i=0; i<args.length; i++)
        {
    	var arg = args[i].split("=");
    	urlarg[arg[0]] = arg[1];
	}
}
function setXY()
{     
  var width = img.width;
  var height = img.height;
  var rate =   width/height;
	if(width > maxWidth )
  {
      width =  maxWidth;
      height = width/rate;
  }
  if(height > maxHeight)
  {
      height = maxHeight;
      width =  height*rate;
  }
  img.width = width;
  img.height = height;
}
function setSRC()
{
	if(!urlarg.src)
	{
		urlarg.src = '';
		return;
	}
	img.onload = function(){
      if(urlarg.width)
    	{
    		maxWidth = urlarg.width;
    	}
    	if(urlarg.height)
    	{
    		maxHeight = urlarg.height;
    	}
    	document.getElementById('loading').style.display = 'none';
    	setXY();
      marginIMG(img);
      img.style.visibility = 'visible';
  }
  img.src = urlarg.src;
}
function load()
{
	getarg();
	marginIMG(document.getElementById('loading'));
	setSRC();
  document.body.oncontextmenu = function (e){return false;};
}
function marginIMG(obj)
{
  if(maxHeight > obj.height)
  {
      obj.style.marginTop =  (maxHeight - obj.height)/2;
      obj.style.marginBottom =  (maxHeight - obj.height)/2;
  }
  if(maxWidth > img.width)
  {
      obj.style.marginLeft =  (maxWidth - obj.width)/2;
      obj.style.marginRight =  (maxWidth - obj.width)/2;
  }
}
load();
</script>
</body>
</html>

在制作的过程中发现,当你调整img对象的长或者宽时,另外一项会随着同比改变,于是就有了我的第一版程序

function setXY()
{
   if(img.width > maxWidth)
{
    img.width = maxWidth;
}
if(img.height > maxHeight)
{
    img.height = maxHeight;
}
}

在我的意识中,这个应该会产生不变形的,最长边等于我设定该边的最大值

开始拿了几个图片都没有问题,昨天他换了一个长宽高都很大的图片,竟然变形了.

测试了半天才发现,原来,当你设定了img的一个边以后,再设置另外一个边的时候,先前设置的边不会跟着变化

例如原图 1000*1000 我们要调整其在800*600的范围显示

正确的长宽应该是 600*600

当我将width设置成800的时候 height 变为800

这个时候程序会再次设置height为600

,出乎以外的是,width竟然没有变成600

经过修改代码应该是

function setXY()
{     
  var width = img.width;
  var height = img.height;
  var rate =   width/height;
	if(width > maxWidth )
  {
      width =  maxWidth;
      height = width/rate;
  }
  if(height > maxHeight)
  {
      height = maxHeight;
      width =  height*rate;
  }
  img.width = width;
  img.height = height;
}

i_saw_you

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie下调整图片长宽的问题

应同事要求,做了个展示图片的网页,来协助他用c++写的程序展示图片.页面全部用js+css静态实现,代码如下* {margin: 0;}div {text-align:center;} var urlarg ={}; var img = document.getElementById('show'); var maxHeight = '600'; var maxW
复制链接

扫一扫