如何让图片在div里面剧中显示

标签：

你可能有很多种方式，但是这种方式我觉得更加简单，供大家参考。

用一个 display:inline-block 的helper容器高度为height: 100% 并且vertical-align: middle 在Img的旁边就能实现。

<style>
        .frame {
            height: 55px;
            /* equals max image height */
            width: 160px;
            border: 1px solid red;
         
        }        
        .helper {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
 
        }        
        img {
            background: #3A6F9A;
            vertical-align: middle;
            max-height: 25px;
            max-width: 160px;
        }
    </style>
    <div class=frame>
        <img src="http://jsfiddle.net/img/logo.png" height=250 /><div class="helper"></div>
    </div>

How it works:

1. When you have two inline-block elements near each other, you can align each to other‘s side, so with vertical-align: middle you‘ll get something like this:

   

2. When you have a block with fixed height (in px, em or other absolute unit), you can set the height of inner blocks in %.

3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.

如何让图片在div里面剧中显示

标签：

原文地址：http://www.cnblogs.com/sgciviolence/p/5489944.html