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

在支持它的浏览器中，您可以使用an SVG fragment identifier 关闭图像的 viewBox。 Firefox 不支持 viewBox（来自 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>

Answer 2

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

1. 将svg 的width 和height 更改为100% 并添加preserveAspectRatio="none"。
2. 由于您使用的是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

将其用作您的 css 文件：

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

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

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

我会尽快改进我的答案