图片等比例缩放
/**计算图片宽和高的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);
