jquery 如何用鼠标在网页中调整图像大小

sg2wtvxw 于 12个月前发布在 jQuery

关注(0)|答案(3)|浏览(119)

我想移动和调整大小的图像在网页上用鼠标。
所以我试着用Jquery。
Jquery的Draggable工作得很好，但resizable不工作。
我的代码有什么问题？
除了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>

字符集

jquery

来源：https://stackoverflow.com/questions/54263429/how-to-resize-image-in-webpage-with-mouse

3条答案

按热度按时间

hxzsmxv21#

这是一个简单的解决方案。还有很多其他的方法。使用这种方法，您可以通过拖动图像的右下角来调整图像的大小。

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

.resizable img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

个字符

赞(0）回复(0）举报 12个月前

hk8txs482#

尝试在您的网站上包含此CSS文件：

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

字符集
jQuery .resizable()需要jQueryUI的CSS样式才能工作。

赞(0）回复(0）举报 12个月前

5lwkijsr3#

参见jqueryui.com - resizable
要查看您的图片，请添加此css CSS：

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

字符集
友情链接：Diary.com - resize a image with HTML & JS
Stackoverflow - HTML5 Pre-resize images before uploading
Stackoverflow - Konva.Js crop and resize的

赞(0）回复(0）举报 12个月前

我来回答

jquery 如何用鼠标在网页中调整图像大小

3条答案

相关问题

热门标签

最新问答