如何能够在各个方向调整图像大小？

Question

我希望能够在各个方向调整我的图像大小。然而，下面的代码只允许我在右下角进行。<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">

Answer 1

请检查我正在添加 句柄：'ne, se, sw, nw'以在各个方向调整图像大小。

 

 

#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">