Material Design Web：mdc-card添加SVG背景后右侧留白问题求助

首先咱们来拆解下你遇到的问题：你的MDC卡片设置SVG背景后右侧出现留白，核心原因是SVG的固有宽高比和卡片的宽高比不匹配，再加上你用了background-size: 100% auto——这个设置只会让背景宽度铺满卡片，但高度会严格按照SVG原比例缩放，当两者宽高比不一致时，自然就会留出空白区域。

下面给你几个适配注册表单需求的解决方案，保证背景能完美贴合卡片，同时不影响后续添加文本框等元素：

方案1：用background-size: cover强制铺满（推荐） #

这个方法会让SVG自动缩放，确保完全覆盖卡片区域，只会裁剪掉超出卡片的部分（如果宽高比不一致），既能保证背景完整展示核心内容，又不会留空白。修改你的CSS：

.mycard {
  height: 90%;
  width: 90%;
  margin: 0 5%;
  background-image: url("https://svgshare.com/i/Aut.svg");
  background-position: center;
  background-size: cover; /* 替换原来的100% auto */
  background-repeat: no-repeat;
}

方案2：用background-size: 100% 100%拉伸铺满 #

如果你不介意SVG被轻微拉伸变形，只想让它完全填满卡片，可以用这个设置：

.mycard {
  height: 90%;
  width: 90%;
  margin: 0 5%;
  background-image: url("https://svgshare.com/i/Aut.svg");
  background-position: center;
  background-size: 100% 100%; /* 强制宽高都铺满卡片 */
  background-repeat: no-repeat;
}

方案3：调整卡片宽高比匹配SVG #

如果不想拉伸或裁剪SVG，你可以修改卡片的宽高比，让它和SVG的固有比例一致。比如先查看你的SVG宽高（假设是2:1的横版比例），然后设置卡片样式：

.mycard {
  width: 90%;
  height: calc(90% * 0.5); /* 按SVG宽高比计算高度 */
  margin: calc((100% - calc(90% * 0.5))/2) 5%; /* 让卡片垂直居中 */
  background-image: url("https://svgshare.com/i/Aut.svg");
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

额外提示：适配表单元素布局 #

后续你要在卡片里加文本框等表单元素，注意MDC Card默认带有内边距，你可以根据需求自定义调整，避免元素贴边：

.mycard {
  /* 其他背景样式 */
  padding: 1.5rem; /* 自定义内边距，给表单元素留出空间 */
}

调整后，SVG背景就能完美贴合卡片，同时完全不影响注册表单元素的布局啦。

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