javascript - Allowing a user to resize a image on the page - Stack Overflow

admin管理员组

文章数量:1414949

I have a section of my webpage that contains media, mostly pictures. I want the user to be able to re-size the picture to whatever size he/she wants. I was hoping the user would be able to drag a corner to re-size the picture if that is possible.
Here is the demo: /
Here is the 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=".jpg" height=200px width=200px>
    <br> I want to be able to resize this picture, make it larger, smaller, ect.
  </div>
</div>

I have a section of my webpage that contains media, mostly pictures. I want the user to be able to re-size the picture to whatever size he/she wants. I was hoping the user would be able to drag a corner to re-size the picture if that is possible.
Here is the demo: https://jsfiddle/anstw7Lu/
Here is the 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./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 21, 2015 at 16:49 RYDiiNRYDiiN 29911 gold badge66 silver badges1515 bronze badges 1

• Check my answer : update code as per your fiddle – Bhavin Solanki Commented Jul 21, 2015 at 17:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

CSS3

You can use a new CSS3 feature called Box Resizing. You should add this to your stylesheet:

img {
  resize: both;
  overflow: auto;
}

Reference: http://www.w3schools./cssref/css3_pr_resize.asp

You might also want to consider using JavaScript, which may have wider browser support. You can use jQuery UI: https://jqueryui./resizable/

To create resize element or image from user side, you need to use Resizable which allow you to resize an element

$(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./ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery./jquery-1.10.2.js"></script>
  <script src="//code.jquery./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./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>

Use a <div> with your image as a background and then allow resizing through 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>

本文标签： javascriptAllowing a user to resize a image on the pageStack Overflow