设置aspectRatio的jQuery UI Resizable无法拉伸至容器全宽如何解决

问题原因 #

该问题由containment边界限制和固定aspectRatio的优先级冲突导致：当容器自身的宽高比小于16:9时，按16:9换算的容器全宽对应高度会超过容器本身的高度，jQuery UI内置的containment逻辑会优先限制元素不超出容器上下边界，最终导致宽度无法拉满，右侧留下间隙。

可用方案 #

方案1：手动控制边界，兼顾宽高限制 #

放弃内置的containment配置，改为在resize事件中手动做边界校验，可根据业务需求优先保证宽度撑满容器：

const $container = $('#container')
const containerW = $container.width()
const containerH = $container.height()

$(".select").resizable({
  aspectRatio: 16 / 9,
  grid: 1,
  resize: function (e, ui) {
    // 优先限制宽度不超过容器宽度，实现撑满效果
    if (ui.size.width > containerW) {
      ui.size.width = containerW
      ui.size.height = containerW * 9 / 16
    }
    // 可选：保留高度不超出容器的限制
    if (ui.size.height > containerH) {
      ui.size.height = containerH
      ui.size.width = containerH * 16 / 9
    }
    // 校正位置避免偏移出容器
    ui.position.left = Math.max(0, ui.position.left)
    ui.position.top = Math.max(0, ui.position.top)
  },
  stop: function (e, ui) {}
})

方案2：仅限制宽度，允许高度超出容器 #

如果业务不需要限制元素高度必须在容器内，可简化逻辑仅做宽度限制：

$(".select").resizable({
  aspectRatio: 16 / 9,
  grid: 1,
  resize: function (e, ui) {
    const containerW = $('#container').width()
    if (ui.size.width > containerW) {
      ui.size.width = containerW
      ui.size.height = containerW * 9 / 16
    }
  },
  stop: function (e, ui) {}
})

方案3：初始化默认撑满容器宽度 #

如果需要元素初始状态就撑满容器，可在初始化前先设置对应尺寸：

const $container = $('#container')
const initW = $container.width()
$('.select').css({
  width: initW,
  height: initW * 9 / 16
}).resizable({
  // 上述其余配置
})

内容的提问来源于stack exchange，提问作者user1503606