js控制图片缩放、水平和垂直方向居中对齐

已測试兼容 IE6,IE7,IE8，火狐FF，谷歌chrome。

这里使用了jquery插件，假设你不使用jquery，略微改造一下也非常快。

网上查了些资料，用css控制兼容性不好，看去非常揪心。于是找js代码，看了几种写法总是感觉差点什么，算了，还是自己写吧，于是有了以下这个简单的方法，能自己主动依据图片容器大小进行缩放、水平和垂直居中对齐，效果例如以下图：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo图片自居中，宽度高度自己主动缩放</title>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
// [email protected]
function setImgMiddle(img) {
var $img = $(img),
$panel = $(img).parent();//图片容器
var img_width = $img.width(),img_height = $img.height(),//图片宽高
panel_width = $panel.width(), panel_height = $panel.height(); //图片容器宽高
if(panel_width/panel_height < img_width/img_height){
$img.width(panel_width);
$img.css(‘margin-top‘, (panel_height - $img.height()) * 0.5);
}else{
$img.height(panel_height);
$img.css(‘margin-left‘, (panel_width - $img.width()) * 0.5);
}
$img.fadeIn(100);
}
$(function(){
// 这样的写法在ie6,7,8都不是非常正常，有时会随机丢失load事件
$(‘#part2 img‘).load(function(){
setImgMiddle(this);
//console.log($(this).attr(‘src‘));
})
})
</script>
<style>
.c{clear:both;}
li {
background-color: #F5F5F5;
border: 1px solid #CCCCCC;
margin: 5px;
overflow: hidden;
width: 240px;
padding:1px 1px 1px 1px;
height: 240px;
float:left;
}
li img{display:none;}
</style>
</head>
<body>
<ul id="part1">
<li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" onload="setImgMiddle(this);"></li>
<li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" onload="setImgMiddle(this);"></li>
<li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg" onload="setImgMiddle(this);"></li>
</ul>
<div class="c"></div>
<ul id="part2">
<li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" ></li>
<li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" ></li>
<li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg"></li>
</ul>
</body>
</html>

时间： 2024-08-08 13:50:22

js控制图片缩放、水平和垂直方向居中对齐的相关文章

块级元素水平和垂直方向居中的方式

块级元素水平和垂直方向居中的方法一共三种 1.先设置块级元素的宽高,然后利用定位和外边距将元素在水平和垂直方向上居中示例: <style> .father{ width: 100%; height: 500px; position: relative; } .son{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; back

HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; } 但是到了移动端,如果写百分比布局的话,高度不好确定,所以弹窗居中就会变得困难,今天遇到这个问题,百度了一下,看到这位朋友的资料,(http://www.shejida

CSS控制图片缩放或者部分显示

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS控制图片缩放或者部分显示</title> 6 </head> 7 8 <body> 9  10 11 12 <!--第一种:设置图片的宽为屏幕宽度的百分比,实现图片跟随屏幕大小自

水平和垂直方向都居中

水平和垂直方向都居中:我们可以在水平上用text-align:center;竖直方向上是vertical-align: middle;但是这个只能用在特定的元素上: 父元素:display:table;子元素:display: table-cell; 例子:父元素: display: table; width: 100%; margin-bottom: 13px; overflow: hidden !important; 子元素: display: table-cell; margin-bott

让DIV标签中的P标签水平和垂直都居中

http://blog.csdn.net/yaoyyl/article/details/50548589 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>让DIV标签中的P标签水平和垂直都居中</title> <style type="text/css"> div { width:400px; height:

用CSS让未知高度内容垂直方向居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; tex

flex align-center：center多行垂直方向居中 align-items:center垂直方向单行居中

align-center:center多行垂直方向居中 align-items:center垂直方向单行居中原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8665647.html

js控制图片自动缩放，实现铺满盒子，不变形，完全局中

此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

【JS控制图片显示的大小（图片等比例缩放）】

效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="