How to be able to resize image in all directions?

user_13351476 0
Viewed 122

I want to be able to resize my image in all directions. However the code below only allows me to do it towards the bottom right corner.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#resizable" ).resizable();
  } );
  </script>
 
<img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg">

jquery javascript
1 Answers

Please check I am adding handles: 'ne, se, sw, nw' for resize your image in all directions.

 
 

#resizable
{
    width: 50%;   
    border: 1px solid #bb0000;   
}
#resizable img
{
    width: 100%;   
}

.ui-resizable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    width: 9px;
    height: 9px;
    
    z-index: 2;
}
.ui-resizable-se
{
    right: -5px;
    bottom: -5px;
}
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script> $(document).ready(function(){
$('#resizable').resizable({
    //aspectRatio: true,
    handles: 'ne, se, sw, nw'
});
});
  </script>
  <img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg">

user_133398370
Related