<!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="Content-Type" content="text/html; charset=gb2312" />
<meta id="robots" content="all" />
<meta name="Description" content="图片垂直居中 图片等比例缩放的方法" />
<meta name="Keywords" content="图片垂直居中" />
<meta id="author" content="土人老徐 http://K.css6.com" />
<meta id="Copyright" content="Copyright 2010-2011 K.css6.com. All Rights Reserved" />
<link href="http://style.china.alibaba.com/css/fdevlib/reset/reset.css" type="text/css" media="screen" rel="stylesheet" />
<title>分享图片垂直居中，图片等比例缩放的方法 </title>
<style type="text/css" media="screen" rel="stylesheet">
.img_list ul li{ float:left; margin:10px; width:202px; height:202px; overflow:hidden; display:inline;}
.img_list ul li a{ width:200px; height:200px; overflow:hidden; display:table-cell; *display:block; line-height:200px; font-size:200px; *font-size:175px; text-align:center;border:1px solid #f00; vertical-align:middle; font-family:Arial;}
.img_list ul li img { vertical-align:middle; vertical-align:middle;}
</style>
</head>
<body>
<div class="img_list">
<ul id="img_list">
<li>
<a href="#">
<img src="http://i00.c.aliimg.com/news/upload/5000780/2_1263433563767.jpg" alt="示例图片" />
</a>
</li>
<li>
<a href="#">
<img src="http://img.china.alibaba.com/news/upload/5000260/392192_1263174952956.jpg" alt="示例图片" />
</a>
</li>
<li>
<a href="#">
<img src="http://i00.c.aliimg.com/news/upload/profile/huodong/guanghuo/03/45_1263268910318.jpg" alt="示例图片" />
</a>
</li>
</ul>
</div>
<script type="text/javascript">
/*
* auto resize image
* @param img img obj
* @param w custom width
* @param h custom height
*/
resizeImage=function(img,w,h) {
img.removeAttribute('width');
img.removeAttribute('height');
var pic;
if(document.all) {
var pic=new Image();
pic.src=img.src;
} else pic=img;
//check images exist and width&height >0 and custom width >0
if(pic&&pic.width&&pic.height&&w) {
if(!h) h=w;
if(pic.width>w||pic.height>h) {
var scale=pic.width/pic.height,fit=scale>=w/h;
if(document.all) img=img.style;
img[fit?'width':'height']=fit?w:h;
if(document.all) img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
}
}
};
window.onload=function(){
var images=document.getElementById('img_list').getElementsByTagName('img');
for(var i=0;i<images.length;i++){
resizeImage(images[i],200);
}
};
</script>
</body>
</html>
如果你觉得本文介绍的图片垂直居中方法值得收藏，请附上本文的网址，谢谢。
本文出处：http://k.css6.com/?p=41
分享到：
相关推荐
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位，使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...
在Android开发中，提供良好的用户体验往往需要处理大图片的拖拽和缩放功能。这篇文章将深入探讨如何在Android中实现这一功能，同时分享相应的源码，以帮助开发者解决类似问题。 首先，我们要知道Android系统提供了`...
这篇技术分享提供了一种使用纯CSS3实现这一效果的方法，无需JavaScript或jQuery等额外的脚本语言。这种方法特别适用于那些希望减少页面加载时间或者避免JavaScript冲突的开发者。 首先，我们需要创建一个包含图片的...
在Android开发中，`GalleryActivity`通常用于创建一个可以浏览多张图片的界面，类似于相册应用中的功能。...实际开发中，可能还需要结合具体需求进行调整和优化，例如加入图片编辑功能、添加分享选项等。
例如，如果希望图片在一行内均匀分布，可以设置`justify-content: space-between`来在每张图片之间添加间隔，或者使用`align-items: center`使图片在垂直方向居中。 对于“任务栏”的布局，这通常指的是应用程序...
3.2 对齐工具（Alignment Tool）： 用于快速对齐对象，可以选择水平对齐、垂直对齐、居中对齐等方式。 3.3 属性面板（Properties Panel）： 用于快速编辑对象的属性，例如颜色、字体、尺寸等。 四、Sketch的协作...
例如，`android:layout_centerHorizontal`和`android:layout_centerVertical`分别使元素水平和垂直居中。`android:layout_centerInParent`则让元素在父元素内完全居中。`android:layout_alignParentBottom`、`...
44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45.jQuery演示Ajax加载并显示图片的相片画廊实例 46.jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
- `.container`类定义了一个居中的布局容器，使用Flexbox布局来实现水平和垂直居中。 - `.card`类定义了一个白色的卡片容器，设置了内边距、边框圆角和阴影效果，使其看起来更像一个实体卡片。 5. **主体内容（`...
- **图片编辑**：裁剪、缩放等操作，以及添加图片作为背景。 - **插入表格**：在图表中插入表格，用于展示数据。 - **添加超链接**：为图形或文本添加链接，实现交互式浏览。 - **添加注释**：为图形添加注释，...
在本文中，我们将探讨如何实现一个从屏幕底部弹出的PopupWindow，这种效果常见于各种应用程序，如选择图片、分享功能等。我们将通过以下步骤来实现这一效果： 1. **定义PopupWindow的布局** 在`take_photo_pop.xml...