时间戳

首页 > 解决方案 > 如何用鼠标调整网页中的图像大小

javascript - 如何用鼠标调整网页中的图像大小

问题描述

我想用鼠标移动网络中的图像并调整其大小。
所以我试着用 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>

标签： javascriptjqueryhtmlcss

解决方案

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

.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>

推荐阅读