如何在非固定宽高比下使用mask-image实现父容器100%填充？

当然可以实现，核心是通过调整mask相关属性，强制遮罩自适应父容器尺寸，下面是两种实用方案：

方案1：强制拉伸遮罩图填充容器 #

直接通过mask-size和mask-repeat属性，忽略遮罩图的原始宽高比，让它完全贴合父容器：

<div class="parent">
  <div class="masked-content"></div>
</div>

html, body {
  height: 100%;
  margin: 0;
}
.parent {
  width: 100%;
  height: 100%;
  background: #eee;
}
.masked-content {
  width: 100%;
  height: 100%;
  background: #2196F3;
  /* 替换为你的遮罩图URL */
  mask-image: url('your-mask.png');
  /* 强制遮罩填充整个容器 */
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  /* 兼容webkit内核浏览器 */
  -webkit-mask-image: url('your-mask.png');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

这种方法简单直接，但如果遮罩图是带细节的位图，拉伸后可能会变形，适合纯色或简单形状的遮罩。

方案2：使用SVG矢量遮罩（无变形风险） #

如果想避免拉伸变形，用SVG作为遮罩是最优解，因为SVG是矢量图形，能自适应任意尺寸：

方法A：内联SVG遮罩 #

<div class="parent">
  <svg width="100%" height="100%">
    <defs>
      <mask id="custom-mask">
        <!-- 自定义遮罩形状，这里示例为自适应容器的圆形 -->
        <circle cx="50%" cy="50%" r="40%" fill="white"/>
      </mask>
    </defs>
    <rect width="100%" height="100%" fill="#2196F3" mask="url(#custom-mask)"/>
  </svg>
</div>

方法B：将SVG作为mask-image的数据源 #

把SVG转成Data URI，直接用在CSS里：

.masked-content {
  width: 100%;
  height: 100%;
  background: #2196F3;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="white"/></svg>');
  mask-size: 100% 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="white"/></svg>');
  -webkit-mask-size: 100% 100%;
}

SVG的viewBox属性确保图形能按比例自适应，不会变形，适合复杂形状的遮罩需求。

注意事项 #

• 确保父容器尺寸明确：如果父容器设置width:100%;height:100%，要保证它的上级容器（比如html、body）也设置了height:100%，否则子元素高度会塌陷。
• 浏览器兼容：webkit内核浏览器需要加-webkit-前缀，现代主流浏览器已支持标准mask属性。

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