调整大小的方形按钮

Question

我目前正在创建一个“数字键盘”，用于将电话号码输入到文本字段中。我希望我的按钮是方形的，我希望它们动态调整大小以适应窗口。问题是，如果我将它们设置为视图高度的百分比，然后使宽度变小，它们不会重新调整大小以适应宽度，如果将它们设置为视图宽度的百分比，并缩小高度，它们不会重新调整大小以适应高度。我怎样才能达到这个效果（例如，我希望按钮的20vh为20vh或20vw为20vw，以较小者为准）。我想避免使用JavaScript，如果这是可能的。这里是我当前的代码：

HTML：

<table> 
      <tr class="numberPadRow"> 
       <td></td> 
       <td><button type="button" class="btn btn-primary numberPadButton" value="0" onclick="appendValue(this);"> 0 </button></td> 
       <td><button type="button" class="btn btn-primary numberPadButton" value="0" onclick="appendValue(this);"> 0 </button></td> 
       <td><button type="button" class="btn btn-primary numberPadButton" value="0" onclick="appendValue(this);"> 0 </button></td> 
       <td></td> 
      </tr> 
     </table> 

CSS：

.numberPadButton { 
    width: 20vh; 
    height: 20vh; 
} 

此外，我一直在努力中心屏幕上的三个按钮，如果有人可以提供帮助的那会令人惊叹:)

在此先感谢

Answer 1

与out javascript将使用max-width和max-height。

.square { 
    width: 20vh; 
    height: 20vh; 
    max-height: 20vw; 
    max-width: 20vw; 
    background-color: #f00; 
} 

http://jsfiddle.net/Lmsn057h/