Resposive background image

Question

什麼是使背景圖像響應的最佳方式？我希望class.container擴大窗口大小的16％。我也希望覆蓋文字並垂直/水平居中。

例子： http://codepen.io/zerostyle/pen/avHqG

<div class="container"> 
    <div class="cat"><p>CATS ARE AWESOME!</p></div> 
</div> 

.cat { 
    background: url("http://placekitten.com/300/300") no-repeat; 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    display: table; 
} 

.cat p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    color:#FFF; 
    font-size:24px; 
} 

Answer 1

試試這個http://jsfiddle.net/TM3WF/1/

.cat { 
    background: url("http://placekitten.com/300/300") no-repeat; 
    position: absolute; 
    width:100%; 
    height: 100%; 
    display: table; 
    background-size:cover; 
} 

.cat p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 

    color:black; 
    font-size:24px;  
}