jquery实现图片按比例缩放示例
更新时间：2014年07月01日 09:22:18 投稿：whsnow
这篇文章主要介绍了通过jquery实现图片按比例缩放,需要的朋友可以参考下
<html>
<title></title>
<head></head>
<style>
.thumbnail{overflow:hidden;width:400px;height:240px;}
</style>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script language="javascript">
$(function(){
/* 图片不完全按比例自动缩小 by zwwooooo */
$('#content div.thumbnail img').each(function(){
var x = 400; //填入目标图片宽度
var y = 240; //填入目标图片高度
var w=$(this).width(), h=$(this).height();//获取图片宽度、高度
if (w > x) { //图片宽度大于目标宽度时
var w_original=w, h_original=h;
h = h * (x / w); //根据目标宽度按比例算出高度
w = x; //宽度等于预定宽度
if (h < y) { //如果按比例缩小后的高度小于预定高度时
w = w_original * (y / h_original); //按目标高度重新计算宽度
h = y; //高度等于预定高度
}
}
$(this).attr({width:w,height:h});
});
});
</script>
<body>
<div id="content">
<div id="thumbnail" class="thumbnail" >
<img id="web" src="./midle.png"/>
</div>
</div>
</body>
</html>
相关文章
jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot具有插件可扩展性(Pluggability)，你可以编写自己的图表样式。2011-04-04
ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果
ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果的实现代码，需要的朋友可以参考下2012-02-02
这篇文章主要为大家详细介绍了jquery点击展示与隐藏更多内容的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jquery ui 实现 tab标签功能,结合完整实例形式分析了jquery ui 实现 tab标签切换功能的相关操作技巧,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了jquery实现图片放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
jQuery前端框架easyui使用Dialog时bug处理
本文介绍了在jQuery前端框架easyui开发UI时，使用Dialog时发现遮罩无法覆盖页面内容，而且对话框也显示不出来，经过一番研究，才发现问题所在，这里分享给大家，有相同情况的小伙伴可以参考下2014-12-12
jQuery.cookie.js实现记录最近浏览过的商品功能示例
这篇文章主要介绍了jQuery.cookie.js实现记录最近浏览过的商品功能,结合实例形式分析了基于jQuery.cookie.js插件创建cookie及保存浏览记录的操作技巧,需要的朋友可以参考下2017-01-01
jQuery修改li下的样式以及li下的img的src的值的方法
这篇文章主要为大家介绍了jQuery如何修改li下的样式，以及修改li下的img的src的值，示例代码很简单，一看就会2014-11-11
这篇文章主要介绍了Jquery操作Ajax方法小结的相关资料,需要的朋友可以参考下2015-11-11
本文给大家分享的是使用javascript实现的七夕情人节丘比特射箭小游戏的代码，并附上源码下载，谁说程序猿就不懂得浪漫呢，小伙伴们感觉拿去献宝吧（当然了，首先你得有女票才行^_^）2015-08-08
最新评论