調整大小的方形按鈕

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/