Menu
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>
919
You can resize an image by positioning the pointer on the upper-left or lower-right corner of the image and dragging the corner to enlarge or reduce the image size. Resizing starts only when the pointer is a double-ended arrow pointing to the north-east.
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
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>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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
