如何通过wrapper实现含absolute定位的任意HTML动态缩放

核心实现思路 #

• 给外层#view容器添加position: relative属性，作为内部所有绝对定位元素的定位基准，避免内部元素相对body定位出现偏移
• 新增一层内容容器，使用CSS transform: scale() 对容器内所有内容进行整体缩放，缩放比例由目标尺寸和input.html原始设计尺寸计算得出
• 设置transform-origin: top left让缩放从左上角开始，保证绝对定位元素的相对位置和原始设计完全一致
• 溢出内容用overflow: hidden隐藏，避免内容超出容器边界

完整Python实现代码 #

# 可根据生成input.html的原始图片尺寸调整基准宽高，示例为1920*1080
BASE_WIDTH = 1920
BASE_HEIGHT = 1080

wrapper = """
<body style="margin: 0;padding: 0;overflow: hidden;">
  <div id="view" style="
    position: relative;
    width: %dpx;
    height: %dpx;
    overflow: hidden;
  ">
    <div class="content-container" style="
      position: absolute;
      top: 0;
      left: 0;
      width: %dpx;
      height: %dpx;
      transform: scale(%f);
      transform-origin: top left;
    ">
      %s
    </div>
  </div>
</body>
"""

def wrap(target_width: int, target_height: int, content: str, base_width: int = BASE_WIDTH, base_height: int = BASE_HEIGHT):
    # 计算缩放比例，取较小值保证内容完全适配不超出容器，如需铺满可分别应用scale_x和scale_y
    scale_x = target_width / base_width
    scale_y = target_height / base_height
    scale = min(scale_x, scale_y)
    return wrapper % (target_width, target_height, base_width, base_height, scale, content)

# 调用逻辑示例
with open("input.html","r") as f:
    content = f.read()

target_width = int(input())
target_height = int(input())

with open("output.html","w") as f:
    f.write(wrap(target_width, target_height, content))

方案说明 #

该方案完全不需要修改input.html内部的任何代码，所有绝对定位的图片、元素都会跟随整体缩放比例适配尺寸和位置，仅通过修改外层wrapper实现需求，兼容任意目标输出尺寸。

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