用css動態調整圖像大小，同時保持正確的縮放？

Question

http://jsfiddle.net/CJzCA/

，你可以在上面的jsfiddle看到鍵盤圖像過大比起文字，通常我會用Photoshop的解決這一點，但有沒有使用CSS，而不是一種方法來調整圖像（比例） ？

那麼這將是在jsfiddler調整值來調整圖像一樣簡單，然後截圖和作物的結果爲固定正確的圖像尺寸，將是一個非常有用的節省時間！

Answer 1

您可以使用background-size: contain;保持縱橫比和保留元素中的圖像：

.dbutton, .ctrlbutton { 
    vertical-align: middle; 

    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
} 

演示：http://jsfiddle.net/Blender/CJzCA/2/

現在，你可以調整width和height單獨和圖像將永遠看起來不錯。

Answer 2

做一個img每個鏈接的圖像內部和簡單地改變的寬度和高度爲所需值的CSS。這不需要CSS3。