CSS拖拽调整div大小时如何保持元素宽高比

完全可以通过CSS aspect-ratio 属性实现需求，效果和background-size: contain完全一致，无需依赖任何外部图片资源。

原有可用方案：外部背景图实现 #

核心依赖background-size: contain的原生等比缩放逻辑，拖拽外层双向resize容器时，背景图会自动适配容器尺寸，不会出现拉伸变形。

示例代码 #

<div class="resize-box bg-icon"></div>

.resize-box {
  resize: both;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  width: 200px;
  height: 200px;
  min-width: 50px;
  min-height: 50px;
  cursor: se-resize;
}
.bg-icon {
  background: url(./icon.png) no-repeat center;
  background-size: contain;
}

优化方案：纯CSS图标无拉伸实现 #

之前伪元素图标拉伸的核心原因：伪元素尺寸直接绑定容器宽高，未锁定自身宽高比，容器拖拽时宽高独立变化，直接带动伪元素拉伸变形。
通过aspect-ratio锁定图标本身的宽高比，配合最大宽高限制，即可实现和背景图contain完全一致的等比缩放效果。

示例代码 #

<div class="resize-box css-icon"></div>

.css-icon {
  position: relative;
}
/* 图标主体 锁定宽高比 */
.css-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  /* 限制图标最大不超出容器 */
  max-width: 90%;
  max-height: 90%;
  /* 核心：锁定图标宽高比，正方形图标设为1/1，其他比例按实际修改 */
  aspect-ratio: 1 / 1;
  width: auto;
  height: 100%;
  /* 以下为示例图标样式：圆形外框 */
  border: 3px solid #1677ff;
  border-radius: 50%;
  box-sizing: border-box;
}
/* 图标组成部分：对勾 */
.css-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  /* 尺寸用百分比相对基准图标设置，避免拉伸 */
  width: 25%;
  aspect-ratio: 2/1;
  transform: translateY(-10%) rotate(45deg);
  border-right: 3px solid #1677ff;
  border-bottom: 3px solid #1677ff;
}

实现注意事项 #

• 非正方形图标只需修改aspect-ratio的比值即可，例如宽高比16:9的图标设置为aspect-ratio: 16 / 9
• 如果需要实现background-size: cover的铺满裁剪效果，只需将max-width/max-height替换为min-width: 100%; min-height: 100%
• 图标所有拆分部分（多个伪元素、内部子元素）的尺寸建议用百分比单位，基于锁定宽高比的图标基准设置，避免比例错乱
• aspect-ratio兼容所有现代主流浏览器，若需兼容IE等极老旧浏览器，可替换为padding-top百分比宽高比hack实现同等效果

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