如何用鼠标调整网页中的图像大小答案

【问题标题】：How to resize image in Webpage with mouse如何用鼠标调整网页中的图像大小
【发布时间】：2019-06-13 06:38:16
【问题描述】：

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

【问题讨论】：

问题是您正在调整容器的大小并且这不会影响图像。您需要使用width: 100% 使图像适合容器。如果你想允许改变比率，给它height: 100%。如果没有，请给它height:auto。

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

谢谢！它运作良好。但我想一起使用拖动和调整大小。如果我在您的代码中添加 jquery 拖动，图像会被移动。你能教我如何同时使用这两种东西吗？

【解决方案2】：

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

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

jQuery .resizable() 需要来自 jQueryUI 的 CSS 的样式才能工作。

【讨论】：

【解决方案3】：

见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

【讨论】：