如何使用鼠标调整网页中图像的大小 [英] How to resize image in Webpage with mouse
本文介绍了如何使用鼠标调整网页中图像的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用鼠标在网络上移动图像并调整其大小.
因此，我尝试使用Jquery进行此操作.
Jquery的Draggable效果很好，但无法调整大小.
我的代码有什么问题?
并且您能推荐除jquery之外的其他方法吗?
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>
推荐答案
这是一个简单的解决方案.还有很多其他的.通过这种方法，您可以通过拉图像的右下角来调整图像的大小.
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>
这篇关于如何使用鼠标调整网页中图像的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
