Html 带遮罩的全幅图像

我有一个带有imageheader（全宽）的响应式网站。在该图像的顶部我有一个SVG掩码，我有这个，所以我在标题的底部有一个类似于绘画的外观。问题是，我的图像无法缩放以适应宽度。我希望它是100%宽和700px高（或像封面一样，它的父母，就像你通常会做：背景大小：封面）

这就是我想要的：

这就是我到目前为止所取得的成就（图像有所不同，但这并不重要：

这就是我需要刷子的原因：

我正在使用的代码：

<div class="cover">
        <svg width="100%" height="100%" baseProfile="full" version="1.2">
            <defs>
                <mask id="svgmask2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="/images/brush-header.png" />
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="/images/header-image.png" />
        </svg>
    </div>

我想要的是： -图像的宽度必须为100%，遮罩必须覆盖整个图像宽度，画笔不能是顶部的图像：我想看到标题后面的站点内容，如第二张图片所示

图像的尺寸： 1920x1256 电刷尺寸：

---

1422x721

将其放入css样式中

 #the-mask {
      position: fixed; 
      top: 0; 
      left: 0; 

      /* Preserve aspet ratio */
      min-width: 100%;
      min-height: 100%;
    }

或

您可以使用它来应用全屏背景图像

html { 
  background: url(/images/header-image.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

---

如果您想让SVG缩放以适应其容器（

cover

），则需要告诉浏览器SVG的内容有多大。如果浏览器不知道SVG有多大，它就无法缩放SVG

您可以使用

viewBox

属性执行此操作

您尚未提供有关图像大小的任何信息。但是，为了本例，假设图像大小为1024x768。然后将SVG根标记更改为：

<svg width="100%" viewBox="0 0 1024 768">

更新 下面是一个400x200图像缩放以适应页面的示例

正文{
保证金：0；
}
.掩护{
高度：700px；
宽度：100%；
}

---

非常感谢Paul LeBeau和，我发现我的画笔和我的图像都需要具有相同的尺寸。结合正确设置的viewBox尺寸，我成功地解决了这个问题

守则：

<svg width="100%" height="100%" baseProfile="" version="1.2" preserveAspectRatio="xMinYMax slice" viewBox="0 0 1920 1256">
            <defs>
                <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="/images/brush-header3.png" /> 
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="<?= $s_Background ?>" />
        </svg>

尝试使用
背景尺寸：cover；
，也许可以解决它。
width=“100%”
将图像的宽度设置为100%。如果图像是200px宽，它将是200px宽，并且不会填充整个浏览器窗口。有没有办法让它填充宽度？（就像背景大小一样：如果是没有遮罩的背景，封面就可以了；）@BartBurg会回答你评论中的问题吗？如果我只想要一张没有遮罩的全宽图像，这确实有效，但遮罩很重要。我想要底部有画笔一样的饰面。将画笔应用到一个div上，然后使用z-index将其放在前面，使其透明。你的回答似乎合乎逻辑，但你能给我一个小例子吗？我的是st我不会把它的容器盖上的。非常感谢！
<svg width="100%" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMin meet">

<svg width="100%" height="100%" baseProfile="" version="1.2" preserveAspectRatio="xMinYMax slice" viewBox="0 0 1920 1256">
            <defs>
                <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="/images/brush-header3.png" /> 
                </mask>
            </defs>
            <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="<?= $s_Background ?>" />
        </svg>