基于Sprite图动态调整图片为父容器50%宽度的需求

放弃使用zoom属性（它会影响整体布局且难以动态适配），改用CSS百分比布局结合background-size来实现需求，具体修改如下：

核心思路 #

• 让Sprite元素宽度直接占父容器（黄色wrapper）的50%
• 利用CSS padding-top的百分比特性（基于元素宽度计算）维持原显示区域的宽高比
• 通过background-size的百分比值适配Sprite图的缩放，确保显示区域正确对应

修改后的代码 #

style.css #

.wrapper {
  background: yellow;
  width: 400px;
  padding: 20px;
  /* 让父容器自适应外部宽度变化 */
  max-width: 100%;
}

.sprite {
  /* 宽度设为父容器的50% */
  width: 50%;
  /* 原显示区域为1:1比例，用padding-top维持高度与宽度等比例 */
  padding-top: 100%;
  /* 移除zoom属性 */
  /* zoom: 2; */
  background: url(https://picsum.photos/200/200) 0 0 no-repeat;
  /* 原Sprite图尺寸200x200，显示区域100x100，故设置为200%让图刚好填满显示区域 */
  background-size: 200% 200%;
}

App.js #

import React from 'react';
import './style.css';

export default function App() {
  return (
    <div className="wrapper">
      <div className="sprite"></div>
    </div>
  );
}

适配不同比例的Sprite区域 #

如果原Sprite显示区域不是1:1比例，比如是2:3（宽200px，高300px）：

• 将padding-top改为150%（3/2*100%）
• 假设Sprite图总尺寸为400x600，显示区域为200x300，则background-size设为200% 200%（400/200*100%）

效果说明 #

• 父容器宽度变化时，Sprite元素宽度自动变为父容器的50%
• 高度始终保持与原显示区域一致的比例
• Sprite图的显示区域会正确缩放，无偏移或拉伸问题

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