js+CSS 图片等比缩小并垂直居中实现代码
更新时间：2008年12月01日 19:57:07 作者：
本例子在在 ff 2.0/ ie6 / ie7 中测试通过。但在 opera 8.5 cn中没有通过。希望大家测试。
复制代码 代码如下:
<!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" />
<title>图片自动等比例缩小且垂直居中-www.jb51.net </title>
<!--[if lte IE 6]>
<script type="text/javascript" language="javascript">
function imgFix() {
//定义要限制的图片宽高,这个宽高要同style里面定义的相同，小于限定高宽的图片不操作
var widthRestriction = 200;
var heightRestriction = 200;
var allElements = document.getElementsByTagName('*')
for (var i = 0; i < allElements.length; i++)
{
if (allElements[i].className.indexOf('imgBox') >= 0)
{
var imgElements = allElements[i].getElementsByTagName('img');
for (var j=0; j < imgElements.length; j++)
{
if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction )
{
if ( imgElements[j].width > imgElements[j].height)
{
imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width);
imgElements[j].width = widthRestriction;
} else
{
imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height);
imgElements[j].height = heightRestriction;
}
}
if ( imgElements[j].height < heightRestriction )
{
imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px";
}
} /*for j*/
}
}/*for i*/
}
window.onload = imgFix;
</script>
<![endif]-->
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.imgBox li {
list-style:none;
width:200px; /* 宽度 */
height:200px; /* 高度 */
background:#ccc;
border:1px solid #666;
text-align:center;
margin:5px;
line-height:200px;
}
.imgBox img {
max-width:200px; /* 宽度 */
max-height:200px; /* 高度 */
vertical-align:middle;
}
-->
</style>
</head>
<body>
<ul class="imgBox">
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
</ul>
</body>
</html>
相关文章
bootstrap时间控件daterangepicker使用方法及各种小bug修复
这篇文章主要介绍了bootstrap时间控件daterangepicker使用方法，及各种小bug修复，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了微信小程序 如何获取网络状态,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了TypeScript中的函数，一般JavaScript中的函数定义常用的有使用function关键字声明函数、使用字面量方式声明函数、使用箭头函数声明函数等几种函数，下面我们大家就一起进入文章了解这些函数的具体定义吧,需要的朋友可以参考一下2021-12-12
这篇文章主要介绍了微信小程序登录session的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要给大家介绍了关于使用Echarts绘制一个多组折线图的相关资料,Echarts是一个功能强大的可视化库,可以用来绘制各种类型的图表,包括多组折线图,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了bootstrap fileinput 上传插件基础使用，重点是把界面做得更加友好，更好的增加用户体验。对bootstrap fileinput知识感兴趣的朋友通过本文一起学习吧2017-02-02
HTML页面元素可以通过js动态改变，比如可以向HTML中添加元素或删除某个元素，下面为示例代码，感兴趣的朋友不要错过2014-08-08
这篇文章主要介绍了uniapp微信小程序:key失效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
2009-03-03
如何在javascript 中使用 xmlHttpRequest 发送 POST
本文将通过不同的示例解释如何使用JavaScript代码在AJAX编程中发送 XMLHttpRequest post 请求，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-07-07
最新评论