我希望能夠在各個方向調整我的圖像大小。然而，下面的代碼只允許我在右下角進行。<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">
1 回答
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
請檢查我正在添加 句柄：'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">