How to resize image in Webpage with mouse

Question

I want to move and resize the image in the web with mouse.
So I tried to that with Jquery.
Draggable of Jquery works well, but resizable doesn't work.
What's the problem in my code?
And Could you recommend other methods except for jquery?

<script>   
$( function() {
    $( "#yoman" ).draggable();
});

$( function() {
    $( "#yoman" ).resizable();
});
</script>

</head> 

<body>
    <div id="yoman" class="ui-widget-content">
        <img src = "https://www.froala.com/assets/blog/pages/post41_2.png" width="100px" height="100px">
    </div>
</body>

The problem is you're resizing the container and that doesn't affect the image. You need to make the image fit in the container with `width: 100%`. If you want to allow changing ratio, give it `height: 100%`. If not, give it `height:auto`. — tao, Jan 19 '19 at 02:01

score 8 · Accepted Answer · answered Jan 19 '19 at 01:58

This is a simple solution. There are many others. With this approach, you can resize the image by pulling the image's lower right corner.

.resizable {
  display: inline-block;
  background: red;
  resize: both;
  overflow: hidden;
  line-height: 0;
  }

.resizable img {
  width: 100%;
  height: 100%;
}

<div class='resizable'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Pigeon_Point_Lighthouse_%282016%29.jpg/220px-Pigeon_Point_Lighthouse_%282016%29.jpg" alt="">  
</div>

Thank you ! it works well. But i want to use drag and resize together. If I add jquery drag in your code , Image is moved . Could you teach me how can use both thing at the same time? — James Thomas, Jan 19 '19 at 02:16

score 1 · Answer 2 · answered Jan 19 '19 at 02:10

1

Try including this CSS file on your site:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

jQuery .resizable() requires the styling from jQueryUI's CSS to work.

answered Jan 19 '19 at 02:10

Leena Lavanya

333
1
10

score 0 · Answer 3 · answered Jan 19 '19 at 02:20

See jqueryui.com - resizable

to see your pic, add this css CSS the:

#yoman { width: 100%; height: 100%; padding: 1.4324352342342423em; margin: 1px;}

Links: Diary.com - resize a image with HTML & JS

Stackoverflow - HTML5 Pre-resize images before uploading

Stackoverflow - Konva.Js crop and resize

How to resize image in Webpage with mouse

3 Answers3

Linked