如何将不规则大小的图像放入 jQuery UI 按钮答案

【问题标题】：how to place irregular sized image into a jQuery UI button如何将不规则大小的图像放入 jQuery UI 按钮
【发布时间】：2013-02-20 21:42:06
【问题描述】：

给定一个固定大小的按钮和一个未知大小的图像（但比按钮的尺寸更小），我如何将该图形动态地放置在按钮上？

这个example only handles something icon sized，这个example也是。

我自己的尝试最终裁剪了右下角的图像。希望得到一些健壮的东西，适用于任何主题滚轮可以吐出的东西。这是一个演示问题的现场示例：http://jsbin.com/iliqih/2/edit

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>

$(document).ready( function() {
var butt = $("<div class='butt' style='width:500; height:500px' />");
$('body').append(butt);
butt.button();

var cssKey = ".ui-icon.bigIcon";
$(".butt").button("option", {
    icons: {
        primary: 'bigIcon'
    },
    text: false
});

var imgUrl = "http://www.artisancomplete.com/wp-content/uploads/2011/03/testpattern-hd-1080-480x270.png";
var imgW = 480;
var imgH = 270;
var str = "<style type='text/css'> " + cssKey + " { background-image: url(" + imgUrl + ") !important; width:" + imgW + "px; height:" + imgH + "px; margin-left:-" + (imgW/2) + "; margin-top:-" + (imgH/2) + "} </style>";
$(str).appendTo("head");
});
</script>
</head>
</html>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-button

【解决方案1】：

尝试调整背景大小，看看是否有帮助：

var str = "<style type='text/css'> " + cssKey + " { background-image: url(" + imgUrl + ") !important; width:" + imgW + "px; height:" + imgH + "px; margin-left:-" + (imgW/2) + "; margin-top:-" + (imgH/2) + "; background-size: " + (imgW-20) + "px " + (imgH-20) + "px;} </style>";

【讨论】：

【解决方案2】：

关键是

背景位置：0

以下是一个更完整的示例，其中previewW 和previewH 是您的图像尺寸。

"<style type='text/css'>" + cssKey + " {width:" + previewW + "px; height:" + previewH + "px;margin-left:" + (-previewW/2) + "px;margin-top:" + (-previewH/2) + "px;background-position:0;background-image:url(" + imgSrc + ")!important;}</style>");

【讨论】：