图像处理程序 - 如何调整大小并使其更大

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-resizable-handle类中的样式）。我已经尝试为每个处理程序方向添加额外的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) {

    }