JQuery加载图片自适应DIV大小

http://www.aichengxu.com/article/Javascript/1237_7.html
如何在固定大小的div中放置一个图片，当图片较小时显示实际大小，当图片超过div 大小时图片自动适应div 的大小
jquery图片自适应大小实现过程的主要代码：

代码如下:

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

实例：

代码如下:

<!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" οnclick="clickMe()"/>
</div>
</body>
</html>
来源：豆芽博客,地址：http://www.aichengxu.com/article/Javascript/1237_7.html保留原文链接,是开源分享的开始.

JQuery加载图片自适应DIV大小相关推荐

固定大小显示图片html,JQuery加载图片自适应固定大小的DIV
如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片自动适应div 的大小 jquery图片自适应大小实现过程的主要代码: 代码如下: .divImg{ ma ...
html图片自动在div里放大,css图片自适应div大小怎么做
css图片自适应div大小怎么做内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性.不管是pc端还是移动端,或者是自适应网站,使用max-wid ...
使用Gilde加载图片时裁剪大小异常
LT.ee("px="+ConvertUtils.dp2px(24));Glide.with(mActivity)//打印出48px.load("http://attac ...
html 标签内背景图片自适应 div 大小
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 只需通过css设置background-size属性为contain,即 background-si ...
HTML中 div标签内背景图片自适应div大小
只需通过css设置background-size属性为contain, 即background-size:contain 注意:一定要在先设置background之后再设置background-siz ...
html div标签内背景图片自适应div大小
只需通过css设置background-size属性为contain,即 background-size:contain 注意:一定要在先设置background之后再设置background-siz ...
jquery动态加载图片数据
这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击 ...
jQuery加载一个html页面到指定的div里
一.jQuery加载一个html页面到指定的div里把a.html里面的某一部份的内容加载到b.html的一个div里. 比如:加载a.html里面的<div id="row&quo ...
ajax静态加载图片,JQuery实现Ajax加载图片的方法
本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然 ...

JQuery加载图片自适应DIV大小

JQuery加载图片自适应DIV大小相关推荐

最新文章

热门文章