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 none（来自SVG 1.2微小规格）摆脱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

将此用作css文件：

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

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

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

我会很快改进我的答案

Answer 3

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

将svg＆＃39; width和height更改为100%并添加preserveAspectRatio="none"。
由于您使用的是img代码，但仅当width或height为固定值时才有效，您必须使用JavaScript设置img＆＃39; s width或height使用JavaScript。

这是一个例子。

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

<强> Fiddle

＆＃13;

var d = document.getElementsByTagName('div')[0];

function resize() {
  d.style.height = window.innerHeight + 'px';
}
resize();
window.onresize = resize;

＆＃13;

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

＆＃13;

<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>

＆＃13;

div img（svg）拉伸到视口高度和宽度

3 个答案: