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

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