如何讓圖片在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.