jquery解决缩略图变形问题的例子

 

 代码如下 复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/reset.css">
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<title>图片居中</title>
<style type="text/css">
.img-box{background:#EFEFEF; padding:20px;}
.img-box li{float:left; margin-right:10px; padding:5px; background:#fff; overflow:hidden;}
.img-box li a{float:left; overflow:hidden; text-align:center; position:relative;}
.img-box li a img{position:relative; vertical-align:text-top;}
/*themes*/
.themes1 li{width:200px; height:200px;}/*容器宽高*/
.themes1 li a{width:200px; height:200px;}/*容器宽高*/
.themes2 li{width:100px; height:100px;}
.themes2 li a{width:100px; height:100px;}
.themes3 li{width:120px; height:90px;}
.themes3 li a{width:120px; height:90px;}
</style>
</head>

<body>
<div class="img-box clearfix">
<ul>
<li><a href="#"><img src="img/001.jpg" width="300" height="372"></a></li>
<li><a href="#"><img src="img/002.jpg" width="497" height="306"></a></li>
<li><a href="#"><img src="img/003.jpg" width="452" height="531"></a></li>
<li><a href="#"><img src="img/004.jpg" width="428" height="319"></a></li>
<li><a href="#"><img src="img/005.jpg" width="85" height="85"></a></li>
<li><a href="#"><img src="img/006.jpg" height="100" width="198"></a></li>
</ul>
</div>
<div class="img-box themes1 clearfix" style="margin-top:20px;">
<ul>
<li><a href="#"><img src="img/001.jpg" width="300" height="372" class="t-img"></a></li>
<li><a href="#"><img src="img/002.jpg" width="497" height="306" class="t-img"></a></li>
<li><a href="#"><img src="img/003.jpg" width="452" height="531" class="t-img"></a></li>
<li><a href="#"><img src="img/004.jpg" width="428" height="319" class="t-img"></a></li>
<li><a href="#"><img src="img/005.jpg" width="85" height="85" class="t-img"></a></li>
<li><a href="#"><img src="img/006.jpg" height="100" width="250" class="t-img"></a></li>
</ul>
</div>
<div class="img-box themes2 clearfix" style="margin-top:20px;">
<ul>
<li><a href="#"><img src="img/001.jpg" width="300" height="372" class="t-img"></a></li>
<li><a href="#"><img src="img/002.jpg" width="497" height="306" class="t-img"></a></li>
<li><a href="#"><img src="img/003.jpg" width="452" height="531" class="t-img"></a></li>
<li><a href="#"><img src="img/004.jpg" width="428" height="319" class="t-img"></a></li>
<li><a href="#"><img src="img/005.jpg" width="85" height="85" class="t-img"></a></li>
<li><a href="#"><img src="img/006.jpg" width="198" height="100" class="t-img"></a></li>
</ul>
</div>
<div class="img-box themes3 clearfix" style="margin-top:20px;">
<ul>
<li><a href="#"><img src="img/001.jpg" width="300" height="372" class="t-img"></a></li>
<li><a href="#"><img src="img/002.jpg" width="497" height="306" class="t-img"></a></li>
<li><a href="#"><img src="img/003.jpg" width="452" height="531" class="t-img"></a></li>
<li><a href="#"><img src="img/004.jpg" width="428" height="319" class="t-img"></a></li>
<li><a href="#"><img src="img/005.jpg" width="85" height="85" class="t-img"></a></li>
<li><a href="#"><img src="img/006.jpg" height="100" width="198" class="t-img"></a></li>
</ul>
</div>
<script type="text/javascript">
//调用
$(function(){
zmnImgCenter($(".t-img"));//JQ的dom
});
//图片居中
function zmnImgCenter(obj){
obj.each(function(){
var $this=$(this);
var objHeight=$this.height();//图片高度
var objWidth=$this.width();//图片宽度
var parentHeight=$this.parent().height();//图片父容器高度
var parentWidth=$this.parent().width();//图片父容器宽度
var ratio=objHeight/objWidth;
if(objHeight>parentHeight && objWidth>parentWidth){//当图片宽高都大于父容器宽高
if(objHeight>objWidth) {//赋值宽高
$this.width(parentWidth);
$this.height(parentWidth*ratio);
}
else {
$this.height(parentHeight);
$this.width(parentHeight/ratio);
}
objHeight=$this.height();//重新获取宽高
objWidth=$this.width();
if(objHeight>objWidth) {
$(this).css("top",(parentHeight-objHeight)/2);
//定义top属性
}
else
{
//定义left属性
$(this).css("left",(parentWidth-objWidth)/2);
}
}
else{//当图片宽高小于父容器宽高
if(objWidth>parentWidth){//当图片宽大于容器宽，小于时利用css text-align属性居中
$(this).css("left",(parentWidth-objWidth)/2);
}
$(this).css("top",(parentHeight-objHeight)/2);
}
})
}
</script>
</body>
</html>

此脚本拟达到以下需求

1.当图片高或宽超过父容器时截取中间部分显示。
2.当图片宽高小于父容器时，居中显示。

时间： 2024-09-30 21:54:32

jquery解决缩略图变形问题的例子的相关文章

jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题_jquery

HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br/><br/><div>搜索</div> 想要实现的结果: 1.input框获取焦点时value为"",失去焦点时value为"默认值":-----这个很好实现: 2.当在input框中输入要搜素的内容后,点击div搜索,要求控

利用jquery解决MVC下…问题

利用jquery解决MVC下A potentially dangerous Request.QueryString value was detected from the client问题 其实A potentially dangerous Request.QueryString value was detected from the client错误原 因是mvc检测了您的请求,如果有'<'等字符串,就会有这个错误.解决办法在action前 加 [AcceptVerbs(HttpVerbs.P

javascript-怎么屏蔽IE弹出来的网页错误 用js 或则jquery 解决都可以

问题描述 怎么屏蔽IE弹出来的网页错误 用js 或则jquery 解决都可以 怎么屏蔽IE弹出来的网页错误 用js 或则jquery 解决都可以 解决方案 <SCRIPT type= 'text/javascript'> <!-- window.onerror=function(){return true;} // --> </SCRIPT>

jquery解决ie6中图片过大导致错位解决方法

jquery解决ie6中图片过大导致错位解决方法 在产品展示页面中用jqurey控制下: /*这个标签调用产品图片*/ <asp教程:image runat="server" id="productbigimg" /> 首先引入jquery <script src="/utility/js/jquery.js" type="text/网页特效"></script> <script ty

ASP.NET配合jQuery解决跨域调用的问题_实用技巧

一. 使用JSONp方式调用 不做详细讲解,可以参考jq文档<jQuery 1.10.3 在线手册> 二. 服务端配置 修改Web.config 文件 <system.webServer> <modules runAllManagedModulesForAllRequests="true"></modules> <httpProtocol> <customHeaders> <add name="Ac

求一个ssh+json+jquery+ajax 登录功能实现的例子

问题描述 求一个ssh+json+jquery+ajax 登录功能实现的例子 ssh+json+jquery+ajax 登录时action业务处理逻辑是如何实现的 以及前台的js如何处理后台的数据 解决方案 http://bbs.csdn.net/topics/390839699http://download.csdn.net/detail/iamcychan/3635220 解决方案二: http://blog.csdn.net/evankaka/article/details/4702397

jQuery解决浏览器兼容性问题案例分析_jquery

本文实例分析了jQuery解决浏览器兼容性问题的方法.分享给大家供大家参考,具体如下: 问题: 当用户在名为abc的input控件按下回车键时,触发另一控件imgLogin的click事件 在IE 中 document.getElementById('abc').click();能够调用abc的click事件 但是在FF中却不行. 解决方法: 必须以下这样: var evt = document.createEvent("MouseEvents"); evt.initEvent(&qu

事件-jquery函数调用问题，给个例子

问题描述 jquery函数调用问题,给个例子 我想调用popover函数,并且参数content是来自于函数fun的返回值,fun函数是一个click响应事件函数,我应该如何写这个fun函数?给个例子 $('.top-menu #messages').popover({ html:true, placement: 'bottom', title: '消息', content: contents }); 解决方案 popover函数和click响应事件函数执行顺序是什么样的,这个很重要,是解决问题

原生Javascript和jQuery做轮播图简单例子_javascript技巧

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮