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

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'以在各个方向调整图像大小。&nbsp;&nbsp;#resizable{&nbsp; &nbsp; width: 50%;&nbsp; &nbsp;&nbsp; &nbsp; border: 1px solid #bb0000;&nbsp; &nbsp;}#resizable img{&nbsp; &nbsp; width: 100%;&nbsp; &nbsp;}.ui-resizable-handle&nbsp;{&nbsp; &nbsp; background: #f5dc58;&nbsp; &nbsp; border: 1px solid #FFF;&nbsp; &nbsp; width: 9px;&nbsp; &nbsp; height: 9px;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; z-index: 2;}.ui-resizable-se{&nbsp; &nbsp; right: -5px;&nbsp; &nbsp; bottom: -5px;}&nbsp;<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">&nbsp; <style>&nbsp; #resizable { width: 150px; height: 150px; padding: 0.5em; }&nbsp; </style>&nbsp; <script src="https://code.jquery.com/jquery-1.12.4.js"></script>&nbsp; <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>&nbsp; <script> $(document).ready(function(){$('#resizable').resizable({&nbsp; &nbsp; //aspectRatio: true,&nbsp; &nbsp; handles: 'ne, se, sw, nw'});});&nbsp; </script>&nbsp; <img id="resizable" src="https://www.w3schools.com/w3css/img_lights.jpg">