使用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。