列表图片自适应垂直居中-空白标签+js

声明：部分代码来源于网络，有改动。

css

.menu{ width:960px; border:1px solid #ccc; background-color:#eee;}
.menu ul li{ width:300px; height:250px; text-align:center; float:left; margin:15px 10px; _margin:15px 7px; display:inline;}
.menu ul li a{ display:block; width:300px; height:250px; border:1px solid red; overflow:hidden; padding:2px;}
.menu ul li a i{ display:inline-block; height:100%; width:0; vertical-align:middle;}
.menu ul li p a{ display:inline; border:none;}
.menu ul li a img{ vertical-align:middle; text-align:center;}

 

HTML

<div class="menu">
	<ul>
    	<li><a href="#"><img src="img/03.jpg" οnlοad="resizeimg(this,300,200)"/><i></i></a><p><a href="#">图片名称</a></p></li>
        <li><a href="#"><img src="img/0101.jpg" οnlοad="resizeimg(this,300,200)"/><i></i></a><p><a href="#">图片名称</a></p></li>
        <li><a href="#"><img src="img/banner01.jpg" οnlοad="resizeimg(this,300,200)"/><i></i></a><p><a href="#">图片名称</a></p></li>
        <li><a href="#"><img src="img/banner05.jpg" οnlοad="resizeimg(this,300,200)"/><i></i></a><p><a href="#">图片名称</a></p></li>
        <li><a href="#"><img src="img/clo06.jpg" οnlοad="resizeimg(this,300,200)"/><i></i></a><p><a href="#">图片名称</a></p></li>
    </ul>
    <div class="cl"></div>
</div>

 

JS

function resizeimg(obj,maxW,maxH)
{
 var imgW=obj.width;
 var imgH=obj.height;
 if(imgW>maxW||imgH>maxH)
 {
  var ratioA=imgW/maxW;
  var ratioB=imgH/maxH;
  if(ratioA>ratioB)
  {   
   imgH=maxW*(imgH/imgW);
   imgW=maxW;
  }
  else
  {        
   imgW=maxH*(imgW/imgH);
   imgH=maxH;
  }
  obj.width=imgW;
  obj.height=imgH;
 }
}

 

效果图

 ------------------------废话分割线------------------------------

 说实话自适应与垂直居中都不难，自己以前也断断续续的研究过，但是每次都是不能完美的实现，垂直居中了自适应就会有问题，自适应弄好了图片就变成居上对齐了，好不容易兼容了谷歌和ie789， ie6又不行，利用css expresstion吧多次刷新界面结果还不一样，头疼死了，直到今天利用空白标签和JS算是把这个问题画上句号了。

当时做的时候就有以下几点考虑：
1、不能乱用定位，后期如果牵涉到滚动等特效会很麻烦

2、不能有各种各样的兼容问题[这句纯属废话]

3、html结构要简洁[便于后期修改与程序循环输出]

用的js是从网上找的，原理就是根据图片比例来缩放，如果图片宽度超过最大宽度，就用最大宽度根据图片自身的比例算出图片缩放后的高度，同理宽度也这么算，不过令我头疼的是那串代码的作者粗心，把imgH=maxW*(imgH/imgW);   imgW=maxW;的前后顺序写错了，如果imgW=maxW这句放在前面，那么下一句代码就是这样imgH=maxW*(imgH/imgW)即imgH=maxW*(imgH/maxW)也就是imgH=imgH，图片缩放之后的高度是图片原来的高度，这显然不行，当时自己拷过来就用了也没仔细看，为此我是付出了沉重的代价，几欲上下求索终得真理。不过还是感谢原作者的思想。

 

多行文本垂直居中对齐

多文本固定高度垂直居中

1、使用空白标签{display;inline-block; width:0; height:100%; vertical-align:middle;}

2、文字放在标签内，使其{display:inline-block; vertical-align:middle;}

<li>
            <span>1班1班11班1班</span><i></i>
</li>

 

.txl_trap ul li span{ display:inline-block; vertical-align:middle;}
.txl_trap ul li i{ width:0; height:100%; display:inline-block; vertical-align:middle;}

效果：

 

最后的最后：如果以上在火狐下可以实现效果，在ie下无法实现垂直居中的效果试着把父级容器font-size设置为0；以下是《css那些事》作者写的

这种方法是利用了一个空的span标签作为垂直居中的钩子

需要注意的是，如果div标签内的span标签和img标签不在同一行，并且不是紧密写在一起的话，那么就需要在外层的div中添加 font-size:0；

添加 font-size:0主要是考虑部分浏览器会对换行和空格产生一个 “字符”做处理