JQuery实现图片在固定大小DIV中的自适应显示

图片自适应需求说明

本文探讨如何在尺寸固定的div容器中嵌入图片，并实现智能显示效果：当图片原始尺寸小于容器时，按实际大小展示；若图片尺寸超出容器限制，则自动缩放以适配容器大小。

CSS样式实现

核心CSS样式代码如下：

 
.divImg{
max-height:200px; max-width:200px;
width: expression(this.width > 200 && this.width > this.height ? 200 : auto);
height: expression(this.height > 200 ? 200 : auto);
} 

完整代码示例

具体应用实例如下：

完整HTML与JavaScript实现代码如下：

 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>
<title>实现图片加载自适应</title>
<script type="text/javascript" src="../jquery.min.js"> </script>
<script type="text/javascript">
function clickMe(){
var url="../Images/1.jpg";
$("#img").attr("src",url);
$("#img").addClass("divImg");
} 
</script>
<style type="text/css">
.divClass {
border: 1px solid red;
width: 200px;
height: 200px;
} 
.divImg{
max-height:200px; max-width:200px;
width: expression(this.width > 200 && this.width > this.height ? 200 : auto);
height: expression(this.height > 200 ? 200 : auto);
} 
</style>
</head>
<body>
<div class="divClass">
<img id="img" > </img>
</div>
<div>
<input type="button" id="btn" style="width:50px;height: 30px;border:1px solid blue;" value="btn" onclick="clickMe()"/>
</div>
</body>
</html>