如何实现可调整大小的div背景图片拉伸填充？

方案一：纯CSS实现（更简洁） #

直接通过CSS控制背景图的拉伸行为，无需额外添加img元素。

首先给.shape类添加以下CSS样式：

.shape {
  /* 保留你原有样式（如宽高、边框、定位等） */
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 强制拉伸背景图以完全填充Div */
}

然后修改动态创建Div的代码，直接设置背景图路径：

$("#add-shape-btn").click(function() {
  const newShape = $("<div>")
    .addClass("shape")
    .attr("id", `shape-${Date.now()}`)
    .css("background-image", 'url("你的图片路径")') // 替换为实际图片地址
    .appendTo("#shapes-container");
  makeResizable(newShape);
  makeDraggable(newShape);
  const shapeId = newShape.attr("id");
  createShapeInfo(shapeId);
  saveShapeData();
});

后续若要修改背景图，直接调用$(目标ID).css("background-image", "新图片路径")即可。

方案二：动态添加img元素实现 #

如果坚持用img元素承载背景，可在创建Div时插入一个铺满容器的img标签，通过CSS让它随Div同步拉伸：

先添加img的专属样式：

.shape {
  /* 保留原有样式，需新增以下属性 */
  position: relative;
  overflow: hidden;
}
.shape-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* 强制拉伸图片以填充容器 */
}

再修改动态创建代码，插入img元素：

$("#add-shape-btn").click(function() {
  const newShape = $("<div>")
    .addClass("shape")
    .attr("id", `shape-${Date.now()}`)
    .appendTo("#shapes-container");
  
  // 动态插入背景图片元素
  $("<img>")
    .addClass("shape-bg-img")
    .attr("src", "你的图片路径") // 替换为实际图片地址
    .appendTo(newShape);
  
  makeResizable(newShape);
  makeDraggable(newShape);
  const shapeId = newShape.attr("id");
  createShapeInfo(shapeId);
  saveShapeData();
});

两种方案都能实现Div调整大小时背景图同步拉伸填充的效果，可根据实际场景选择。

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