css - 在保持正确缩放的同时使用 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。