源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JQuery加载图片自适应固定大小的DIV

  • 时间:2022-04-27 14:53 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JQuery加载图片自适应固定大小的DIV
如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 [b]jquery图片自适应大小实现过程的主要代码:[/b] 代码如下:
[u]复制代码[/u] 代码如下:
.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); }
实例: 代码如下:
[u]复制代码[/u] 代码如下:
<!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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部