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

时间 2019-11-19 标签如何图片 div 里面剧中显示

你可能有不少种方式，可是这种方式我以为更加简单，供你们参考。ide

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

<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:spa

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:.net
When you have a block with fixed height (in px, em or other absolute unit), you can set the height of inner blocks in %.code
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.