如何调整Buy Me a Coffee Widget尺寸？CSS尝试后出现空白问题

问题分析 #

你用容器包裹BMC脚本后出现大片空白，核心原因是BMC官方脚本会动态生成自带fixed定位的元素，和你自定义容器的fixed定位叠加冲突，导致布局混乱；同时脚本生成的元素有默认宽高和内部布局，硬给容器设固定宽高只会让元素溢出或留白。

正确解决方案 #

不需要额外容器，直接通过CSS缩放脚本生成的小部件，同时修正定位避免偏移：

1. 保留原始HTML脚本（移除多余容器）

<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="absolutelyazury" data-description="Support me on Buy me a coffee!" data-message="" data-color="#BD5FFF" data-position="left" data-x_margin="15" data-y_margin="15"></script>

2. 编写CSS实现缩放与定位修正

/* 定位到BMC生成的主容器 */
.bmc-widget {
  /* 缩放到原尺寸的50%，同时修正垂直居中 */
  transform: translateY(-50%) scale(0.5) !important;
  /* 设置缩放原点为左侧居中，避免缩放后位置偏移 */
  transform-origin: left center !important;
  /* 保留原有的水平定位 */
  left: 15px !important;
  top: 50% !important;
}

/* 若空白是脚本生成的背景遮罩导致，直接隐藏 */
.bmc-widget-backdrop {
  display: none !important;
}

补充说明 #

• !important 用于覆盖脚本自带的内联样式，确保自定义样式生效
• 如果缩放后位置仍有偏差，可以调整transform-origin的值（比如left top）或微调left/top的像素值
• 不要用额外容器包裹脚本，BMC脚本会自动创建独立DOM元素，外部容器只会干扰它的原生定位逻辑

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