图像处理程序 - 如何调整，使他们更大

Question

我怎样才能让大小调整处理器为移动应用大的图像？

https://jsfiddle.net/xvraLpna/4/

<div class="demo" contenteditable="true"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed sodales purus, quis aliquet leo. Ut in purus lectus. Ut pulvinar, neque ut dignissim tristique, massa massa venenatis lorem, quis scelerisque diam sem a neque. Proin in suscipit tortor. Cras ac odio vel nisi dignissim vulputate. Cras nec nulla nisl. Nunc eget convallis orci. In neque arcu, rutrum molestie orci vel, mollis imperdiet erat. Morbi tincidunt est massa, et iaculis mi pharetra a. Phasellus libero justo, faucibus at diam porttitor, laoreet pellentesque justo. Morbi sed vestibulum ipsum, eget placerat felis. Cras lobortis rhoncus pharetra. Aliquam hendrerit molestie orci, sed mattis nibh. Duis mattis, nisl ac venenatis posuere, nisi ante imperdiet lacus, vitae congue nibh quam vitae nibh. Cras nibh quam, dictum nec libero at, porta ornare erat. 

    <img src="http://store.valvesoftware.com/images/sizing_chart_shirt.png" alt="" /> 

</div> 

CSS：

.ui-resizable-handle { 
    background: #ababab; 
    border: 1px solid #000000; 
    width: 9px; 
    height: 9px; 
} 

.ui-resizable-e { 
    right: -5px; 
    top: 50%; 
} 

etc... 

JQuery的：

$('img').resizable({ 
    handles: 'all' 
}); 

如果我注释掉上面的jQuery代码，然后我得到8个个小尺寸调整处理程序和所有演出没有被切断。有用。但由于这将用于移动应用程序，我想使手柄变大。

如果我去掉上面的jQuery代码，然后我得到较大的灰色方块（目前靶向9px身高和体重，如在的.ui调整大小手柄类样式）。我已经尝试为每个处理程序方向添加额外的div类，但它看起来很乱，它会调整较大的内容可编辑div而不是图像。

在下面的图片中，正方形太小，在移动适当调整。但是，单击以显示调整大小处理程序并调整大小它完美。

在下面的图片中，我设计了处理程序来使它们更大（9px）和灰色。我还添加了几行jQuery来实现它。然而，当我点击图像来调整它的大小时，我遇到了两个问题：1）较小的白色方块仍然与灰色方块一起显示，2）现在在边缘处切除方块，以及缺少的黑色边境。

我希望用户能够在将来添加多个图像。

什么是去调整处理程序最简单的方法？

Answer 1

只需使用CSS增加处理器的height。

例如：

.ui-resizable-s { 
    bottom: 0; 
    height: 100px; 
} 

如果你想创建特定于某些设备只喜欢移动设备，你可以使用媒体查询更大的处理程序。

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) { 

    } 

    /* Small Devices, Tablets */ 
    @media only screen and (min-width : 768px) { 

    }