0

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

这个例子只处理图标大小的东西，就像这个例子一样。

我自己的尝试最终裁剪了右下角的图像。希望得到一些健壮的东西，适用于任何主题滚轮可以吐出的东西。这是一个演示问题的现场示例：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>
4

2 回答 2

0

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

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>";
于 2013-02-20T22:36:41.373 回答
0

关键是

背景位置：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>");
于 2013-02-22T02:40:29.063 回答