带遮罩的全宽图像

Question

我有一个带有图像标题（全角）的响应式网站。在该图像之上，我有一个 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>

cover 有 css 的地方：

.cover{
  height: 700px;
  width: 100%;
}

我想要的： - 图片的宽度必须为100%，遮罩必须覆盖整个图片宽度，画笔不能是顶部的图片：我想看到标题后面的网站内容，就像你在第二张图片中看到的那样.

图片尺寸： 1920x1256 刷子尺寸： 1422x721

Answer 1

把它放在你的 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;
}

Answer 2

如果您希望 SVG 缩放以适应其容器 (cover)，您需要告诉浏览器 SVG 的内容有多大。如果它不知道它有多大，它就无法缩放 SVG。

您可以使用 viewBox 属性来做到这一点。

您没有提供任何关于您的图片有多大的信息。但假设，为了这个例子，它是 1024x768。然后将您的 SVG 根标签更改为：

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

您可能还想更改preserveAspectRatio 属性，使其位于容器的顶部：

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

更新

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

body {
  margin: 0;
}

.cover {
  height: 700px;
  width: 100%;
}

<div class="cover">
    <svg width="100%" viewBox="0 0 400 200" preserveAspectRatio="xMidYMin meet">
        <image id="the-mask" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="http://lorempixel.com/400/200/" />
    </svg>
</div>

Answer 3

非常感谢 Paul LeBeau 和 this overflow answer，我发现我的画笔和图像都需要具有相同的尺寸。结合正确设置的 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>