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

3 回答

• 1

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

  • 将 svg 的 width 和 height 更改为 100% 并添加 preserveAspectRatio="none" .

  • 由于您使用的是 img 标签，这仅适用于 width 或 height 是固定值的情况，您必须使用JavaScript来使用JavaScript设置 img 的 width 或 height .

  这是一个例子 .

  Note ：在你的情况下，你必须设置 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>
  

  回复于 2024-04-20T07:27:19+08:00
• 0

  在支持它的浏览器中，您可以使用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>
  

  回复于 2024-04-20T07:27:19+08:00
• 0

  使用它作为您的css文件：

  .flag {
      position: absolute;
      z-index: -1;
      background-size: contain;
  }
  
  img{
      width: 50%;
      height: 50%;
  }
  

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

  I will improve my answer soon

  回复于 2024-04-20T07:27:19+08:00