CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RYDiiN
RYDiiN

Reputation: 299

Allowing a user to resize a image on the page

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

Upvotes: 1

Views: 4472

Answers (3)

spencer.sm
spencer.sm

Reputation: 20614

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>

Upvotes: 2

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

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

Upvotes: 2

kittenchief
kittenchief

Reputation: 1255

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.com/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.com/resizable/

Upvotes: 3

Related Questions