圖像處理程序 - 如何調整，使他們更大

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) { 

    }