如何让响应式wrapper画布signature_pad适配div容器？

嘿，我看你在响应式视图里调整签名画布时遇到了超出容器边框的问题，咱们来拆解下问题根源，然后给出可行的解决方案～

问题分析 #

你的.wrapper容器宽度设置为262px，但内部的.signature_client和.signature_tech却设置了width: 280px——这个固定宽度比容器宽，自然会超出边框啦。你之前尝试调整min-width和max-width没起效，是因为直接设置的固定width优先级更高，覆盖了这些属性的作用。

解决方案 #

根据你的需求，这里有几种常用的处理方式：

1. 让画布完全适配容器宽度（推荐响应式场景）

把画布的宽度改成100%，这样它会自动匹配容器的宽度，不会再超出。同时可以把高度也设为100%，保证和容器高度完全对齐：

.wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
  position: relative;
  width: 262px;
  height: 150px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 可选：加个边框方便直观查看容器范围 */
  border: 1px solid #ddd;
}

.signature_client, .signature_tech {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%; /* 适配容器宽度 */
  height: 100%; /* 适配容器高度 */
}

如果是响应式场景，还可以把.wrapper的width改成max-width: 262px，再加上width: 100%，这样在小屏幕上容器会自动收缩，画布也会跟着自适应：

.wrapper {
  /* 其他属性不变 */
  width: 100%;
  max-width: 262px;
}

2. 调整容器宽度容纳画布

如果你需要画布保持280px的宽度，那直接把.wrapper的width改成280px，让容器能完全装下画布即可：

.wrapper {
  /* 其他属性不变 */
  width: 280px;
}

3. 裁剪超出部分（不推荐，会丢失内容）

如果不想调整容器或画布的尺寸，可以给.wrapper添加overflow: hidden，这样超出的部分会被隐藏，但签名时可能会导致部分内容被裁剪，所以只在特殊场景下使用：

.wrapper {
  /* 其他属性不变 */
  overflow: hidden;
}

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