css - 响应式背景图像

Question

使背景图像响应的最佳方法是什么？我希望 .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;    
}