正如您在上面的 jsfiddle 中看到的,键盘图像与文本相比太大了,通常我会使用 photoshop 解决这个问题,但是有没有办法使用 css 来调整图像的大小(缩放)?
那么它就像在 jsfiddler 中调整值以调整图像大小一样简单,然后截图并裁剪结果以获得固定的正确图像大小,这将是一个非常有用的节省时间!
正如您在上面的 jsfiddle 中看到的,键盘图像与文本相比太大了,通常我会使用 photoshop 解决这个问题,但是有没有办法使用 css 来调整图像的大小(缩放)?
那么它就像在 jsfiddler 中调整值以调整图像大小一样简单,然后截图并裁剪结果以获得固定的正确图像大小,这将是一个非常有用的节省时间!
您可以使用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
,图像总是看起来不错。
在图像的每个链接中创建一个img
内部,只需将宽度和高度更改为 css 中所需的值。这不需要CSS3。