一个图片在自适应宽度中的垂直居中且自适应缩放

效果：

 

晚上刚好群里的问起来，调试了一下，把代码mark一下，方便以后使用

<ul>
        <li>
            <div class="pic"><img src="2.png" alt="" /></div>    
            <div class="txt">鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋</div>        
        </li>
        <li>
            <div class="pic"><img src="1.jpg" alt="" /></div>    
            <div class="txt">鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋</div>        
        </li>
    </ul>

 

*{margin: 0;padding: 0;}
ul,li{list-style: none;}
body{font:18px/1.5 "微软雅黑";}
ul{
    height: auto;
    overflow: hidden;
    zoom:1;
    margin:0 auto;
    width: 100%
}
li {
border: 1px solid #000;
overflow: hidden;
zoom: 1;
margin-bottom: 10px;
display: inline-table;
/*vertical-align:middle;*/
width: 100%
}
.pic {
width: 20%;
text-align: center;
vertical-align: middle;
height: 100%;
display: inline-block;
}
.pic img{
    width: 80%;
    vertical-align:middle;
}
.txt{
    width: 79%;
    padding:10px 0;
    display: inline-block;
}

 

处理上还是有一点小问题的，本身用display：table-cell可以实现的，调试好的样式复制回文件出了点问题，搞到忘记怎么修改了。等以后有机会再完善一下