div img(svg) 拉伸到视口高度和宽度

Question

我正在尝试将图像 (.svg) 宽度填充到我的 DIV 允许它拉伸，但我的图像只有 100% 宽度和高度它裁剪底部。

我怎样才能让它的高度拉伸到视口高度？我已经尝试将图像制作成背景图像，但这在设计中不起作用。

.flag {
 position: absolute;
 z-index: -1;
 background-size: contain;
}
#flag img{
 width: 100vh;
 height: 100vh;
}

<section class="cover" style="min-height: 100vh">
 <img src="img/background.svg" class="flag"></div> 
</section>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
  height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Layer_1" display="none">
 <rect x="-0.5" y="0.5" display="inline" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="57" height="768"/>
 <rect x="967.5" y="0.5" display="inline" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="57" height="768"/>
 <rect x="-0.5" y="0.5" display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" width="1025" height="57"/>
 <rect x="-0.5" y="711.5" display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" width="1025" height="57"/>
</g>
<g id="Layer_2">
 <rect fill="#FFFFFF" width="1024" height="768"/>
 <rect y="103" width="1022" height="34"/>
 <rect y="171" width="1022" height="34"/>
 <rect y="239" width="1022" height="34"/>
 <rect y="631" width="1022" height="34"/>
 <rect y="563" width="1022" height="34"/>
 <rect y="495" width="1022" height="34"/>
 <rect x="55" y="58" fill="#E5452D" width="912" height="654"/>
 <rect x="55" y="385" fill="#0698CF" width="912" height="327"/>
</g>
</svg>

Answer 1

将此用作您的 css 文件：

.flag {
    position: absolute;
    z-index: -1;
    background-size: contain;
}

img{
    width: 50%;
    height: 50%;
}

jsFiddle: http://jsfiddle.net/cwnkswpo/

我会尽快改进我的回答

Answer 2

要根据视口拉伸图像，您必须：

将 svg 的 width 和 height 更改为 100% 并添加 preserveAspectRatio="none".
由于您使用的是 img 标签，并且这仅在 width 或 height 是固定值时有效，因此您必须使用 JavaScript 来设置img 的 width 或 height 使用 JavaScript.

这是一个例子。

注意：在您的情况下，您必须设置 img 的 height。

Fiddle

var d = document.getElementsByTagName('div')[0];

function resize() {
  d.style.height = window.innerHeight + 'px';
}
resize();
window.onresize = resize;

body {
  margin: 0;
}
div {
  position: relative;
  overflow: hidden;
}

<div>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve" preserveAspectRatio="none">
    <g id="Layer_1" display="none">
      <rect x="-0.5" y="0.5" display="inline" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="57" height="768" />
      <rect x="967.5" y="0.5" display="inline" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="57" height="768" />
      <rect x="-0.5" y="0.5" display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" width="1025" height="57" />
      <rect x="-0.5" y="711.5" display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" width="1025" height="57" />
    </g>
    <g id="Layer_2">
      <rect fill="#FFFFFF" width="1024" height="768" />
      <rect y="103" width="1022" height="34" />
      <rect y="171" width="1022" height="34" />
      <rect y="239" width="1022" height="34" />
      <rect y="631" width="1022" height="34" />
      <rect y="563" width="1022" height="34" />
      <rect y="495" width="1022" height="34" />
      <rect x="55" y="58" fill="#E5452D" width="912" height="654" />
      <rect x="55" y="385" fill="#0698CF" width="912" height="327" />
    </g>
  </svg>
</div>

Answer 3

在支持它的浏览器中，您可以使用 an SVG fragment identifier 关闭图像的 viewBox。 Firefox 支持 viewBox none（来自 SVG 1.2 tiny 规范）摆脱 viewBox 将允许在不强制纵横比的情况下显示图像。

另一种选择是将 preserveAspectRatio 设置为 none（同样，片段标识符可以做到这一点）即 #svgView(preserveAspectRatio(none)) 具体取决于您想要什么。

如果需要，您可以同时执行这两项操作。我在下面展示了 preserveAspectRatio。

<section class="cover" style="min-height: 100vh">
    <img src="http://www.klh-dev.com/lehava/train/test.svg#svgView(preserveAspectRatio(none))" class="flag">
</section>

div img(svg) 拉伸到视口高度和宽度

div img(svg) stretched to viewport height and width

html

css

svg

viewport

stretch