/**计算图片宽和高的css代码（主要内容）**/
img{
max-width: 220px;
max-height: 220px;scale: expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 220 ? "220px" : "auto"):(this.style.height = this.offsetHeight >= 220 ? "220px" : "auto"));display: inline !important;}
/**示例代码片段**/
<head>
<style type="text/css"> <!--计算图片宽和高--> img {max-width:200px; max-height:200px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 200 ? "200px" : "auto"):(this.style.height = this.offsetHeight >= 200 ? "200px" : "auto")); display:inline !important;}</style>
</head><!--测试代码body内容-->
<body>
<div style="width:200px; height:200px; text-align:center ;vertical-align: middle;display:table-cell; border:1px solid red;">
<img class="imgbox" id="test" src="img/1.jpg"/> </div> <div style="width:200px; height:200px; text-align:center ;vertical-align: middle;display:table-cell; border:1px solid red;"> <img class="imgbox" id="test0" src="img/2.jpg"/> </div> <div style="width:200px; height:200px; text-align:center; vertical-align: middle; border:1px solid red; display:table-cell;"> <img class="imgbox" id="test1" src="img/3.jpg"/> </div><body>
截止到这里,标题描述的需求已经结束了....
效果图如下：
思路及说明及问题：
非专业前端工程师,碰到这玩意网上找了半天...
之前考虑用js脚本来计算,后面碰到个问题(见最底部)，最终未能解决，后面又考虑css 最后还是css完美解决...
记录下来以后备用同时给碰到同样需求的朋友提供个思路!
另外下面有个问题未解决！如有大神路过,希望指点一二...
/**js设置图片宽高脚本（存在谷歌浏览器兼容问题 故最终未使用）**/
/*根据指定大小和图片元素等比例计算宽和高*/
function AutoResizeImage(maxWidth, maxHeight, objImg) {
var oldWidth = objImg.width == 0 ? maxWidth : objImg.width; var oldHeight = objImg.height == 0 ? maxHeight : objImg.height; var Ratio = oldWidth / oldHeight; //默认比例为1 不缩放 var newWidth = maxWidth; var newHeight = maxHeight; //如果宽度小 则按高度来缩放 if (oldWidth < oldHeight) { newHeight = oldHeight >= maxHeight ? maxHeight : oldHeight; //大于最大高度时取最大高度 newWidth = newHeight * Ratio; } else if (oldWidth > oldHeight) { //按宽度缩放 newWidth = oldWidth >= maxWidth ? maxWidth : oldWidth; //大于最大高度时取最大高度 newHeight = newWidth / Ratio; } else { return; } objImg.width = newWidth; objImg.height = newHeight; };
/**调用**/
var objImg =document.getElementById("test");
AutoResizeImage(200,200,objImg);var objImg0 =document.getElementById("test0");
AutoResizeImage(200,200,objImg0);var objImg1 =document.getElementById("test1");
AutoResizeImage(200,200,objImg1);