Make Iframe or image resizable

To make any image or div or iframe resizable follow the steps

Step 1:

    Create a parent div and give height and width to it whatever you want

Step 2:

    Place the image or iframe inside it and give height="100%" and width="100%"
  
    <div class="resizable" style="height:300px;width:300px;">
        <iframe src="http://w3schools.com/" style="height:100%;width:100%;"></iframe>
    </div>
  
Step 3:

add the following jQuery Script

<script type="text/javascript">
    $(function() {
      $(".resizable").resizable({
        helper: "ui-resizable-helper",
        //aspectRatio: 16 / 9,
      });
    });
</script>



Note : we assume that you have already included jQuery library in your Project

• Tweet
• Share
• Share
• Share
• Share