javascript - 允许用户调整页面上图像的大小

Question

我的网页有一部分包含媒体，主要是图片。我希望用户能够将图片调整为他/她想要的任何尺寸。如果可能的话，我希望用户能够拖动一个 Angular 来调整图片的大小。
这是演示:https://jsfiddle.net/anstw7Lu/
这是HTML:

 <div id="media-section">
   <!--Title -->
  <div id="media-title">Media</div>

  <div id="media-button" class="button-container">
  <!-- The panel that will display the content -->
  <div id="media-content"><br><br>
    Here is my picture<br><img src="http://circleofdocs.com/wp-content/uploads/2014/10/bigstock-Coconut-isolated-on-white-back-70653349.jpg" height=200px width=200px>
    <br> I want to be able to resize this picture, make it larger, smaller, ect.
  </div>
</div>

Answer 1

CSS3

您可以使用名为 Box Resizing 的新 CSS3 功能。您应该将其添加到您的样式表中:

img {
  resize: both;
  overflow: auto;
}

引用: http://www.w3schools.com/cssref/css3_pr_resize.asp

您可能还想考虑使用 JavaScript，它可能具有更广泛的浏览器支持。您可以使用 jQuery UI:https://jqueryui.com/resizable/