jquery ui を使用して、ドラッグしている div をスケーリングして、その背後にあるものを見やすくしようとしていますが、その中のテキストが奇妙にスケーリングされています。テキスト自体は小さくなりますが、周囲にたくさんのパディングがあり、浮いているようです。テキストは div に適切に含まれているはずですが、div の下部を超えて拡張されています。テキスト行の周りに赤い境界線を置き、境界線は元のテキストと同じサイズです。これを機能させるために何をすべきか本当にわかりません...
HTML:
<div class="item draggable" id="item-1'">
<div class="image-block">
<a class="delete-button" title="delete me!" href="/remove/1" onclick="return $(this).confirm(\'Really remove this image?\');">X</a>
<a class="image" href="/edit/1"><img src="/someimage.jpg" /></a>
<div class="clear-block"></div>
</div>
<h3>Some title</h3>
</div>
CSS:
div.image-list div.item {
float:left;
background:#fff;
width:150px;
padding:5px;
margin:4px;
border:1px solid #d3d5d6;
}
div.image-list div.item h3 {
margin:0;
padding:0;
border:solid 1px #F00;
}
div.image-list div.item div.image-block a.delete-button {
float:right;
position:relative;
background:#fff;
display:none;
top:0.8em;
margin-bottom:-20.0em;
width:3em;
height:1.8em;
padding:0.2em 1em;
}
div.image-list div.item div.image-block a.image {
float:left;
display:block;
}
.clear-block {
clear:both;
}
jquery:
$(".draggable").draggable({
helper: 'clone',
start: function(ev, ui) {
$(ui.helper).effect( "scale", { percent: 50 }, 200 );
}
});