提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery中加载图片自适应大小主要实现代码

jQuery代码 实现 图片 加载 大小 主要 适应
2023-06-13 09:15:04 时间
如何在固定大小的div中放置一个图片，当图片较小时显示实际大小，当图片超过div大小时图片自动适应div的大小
实现过程的主要代码：
复制代码代码如下:

.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);
}

实例：
复制代码代码如下:

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html:charset=utf-8"/>
<title>实现图片加载自适应</title>
<scripttype="text/javascript"src="../jquery.min.js"></script>
<scripttype="text/javascript">
functionclickMe(){
varurl="../Images/1.jpg";
$("#img").attr("src",url);
$("#img").addClass("divImg");
}
</script>
<styletype="text/css">
.divClass{
border:1pxsolidred;
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>
<divclass="divClass">
<imgid="img"></img>
</div>
<div>
<inputtype="button"id="btn"style="width:50px;height:30px;border:1pxsolidblue;"value="btn"onclick="clickMe()"/>
</div>
</body>
</html>

相关文章