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

Question

我的网页中有一部分包含媒体，主要是图片。我希望用户能够将图片重新调整为自己想要的尺寸。我希望用户能够拖动一个角来重新调整图片的大小。这是演示：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

要从用户端创建调整大小的元素或图像，您需要使用Resizable来调整元素的大小

$(function() {
    $( "img" ).resizable();
  });

#media-section{
	float:left;
	text-align: center;
	height:500px;
	width: 250px;
	border-style: solid
}
#media-title{
    height:6%;
	width:100%;
	float:left;	
	font-size:24px;
}
#media-button{
	height:4%;
	width:100%;
	float:left;
	border-style: solid;
	border-top: none;
	border-left: none;
	border-right: none;
}
#media{
	width:100%;
	height:92.5%;
	float:left;
}	

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="media-section">
    <!--Title -->
    <div id="media-title">Media</div>

    <div id="media-button" class="button-container">
        <!-- Button that when clicked activates a dalog box for the passage. -->
        <button id="max-media" class="max"></button>
    </div>
 
    <!-- The panel that will display the content -->
    <div id="media-content">
        Here is my picture<br><img id="resizable" 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 2

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/

Answer 3

将图像作为背景使用<div>，然后允许通过CSS调整大小。

.image {
  width: 130px;
  height: 100px;
  background-image: url('https://picsum.photos/id/203/130/100');
  background-size: contain;
  border: 1px solid lightgray;
  background-repeat: no-repeat;

  resize: both;
  overflow: auto; 
}

<div class="image"></div>