你如何缩放 svg img 以适应容器？答案

【问题标题】：How do you scale a svg img to fit container?你如何缩放 svg img 以适应容器？
【发布时间】：2020-05-24 04:29:04
【问题描述】：

所以我有两张 svg 图片，一张在左边，一张在右边。它们都有 100% 的高度和 50% 的宽度。图像没有缩放以适应容器，我已经尝试了一切。我试图摆弄视图框，但不太明白。 preserveAspectRatio 几乎一无所获，但是当您调整浏览器大小时它会挤压图像。 Slice 几乎得到它，但一张图片与另一张重叠。我已经尝试了一切，但都是空的。有人有什么建议吗？我正在尝试摆脱空白并让图片覆盖背景，但 css 背景：封面不起作用。

这是我的代码：

header {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    // background: black;

    .airplane {
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }

    .wings {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;

        // background-image: linear-gradient(rgba(black, 0.))
    }

    .airplaneleft {
        position: absolute;
        top: 0;
        right: 0;
        // background: red;
        animation: left 2s forwards;
    }

    .airplaneright {
        position: absolute;
        top: 0;
        left: 0;
        // background: black;
        animation: right 2s forwards;
    }



HTML

<header>
        <div class="menu">
            <input type="checkbox" class="toggler">
            <span></span>
        </div>
        <nav class="navbar">
            <ul class="links">
                <li class="link"><a href="#">Home</a></li>
                <li class="link"><a href="#">About</a></li>
                <li class="link"><a href="#">Aviation</a></li>
                <li class="link"><a href="#">Contact</a></li>
                <li class="link"><a href="#">Projects</a></li>
            </ul>
        </nav>
        <div class="intro">
            <h1 class="name"><span class="first">Jovan </span class="last"><span>Elmore</span></h1>
            <h2 class="title">Aviation Specalist</h2>
        </div>
        <div class="airplane">
            <img class="airplaneleft wings" src="\imgs\FfRZvZFh01.svg" alt="left side of airplane">
            <img class="airplaneright wings" src="\imgs\VRjCKGg201.svg" alt="right side of airplane">
        </div>
    </header>

【问题讨论】：

你能带一张图片你需要达到什么结果？还是您当前代码的实时示例？
@focus.style 我有图片。我正在尝试覆盖背景，但 css background:cover 不起作用。
我看到很多背景属性和非背景图像。您是否仅使用 2 张此图像？或者还有一些？您可以将所有图片上传到某处并在此处放一个链接，以便我测试您的代码吗？
@focus.style 我想我可能发现了一个问题。当我使用 svg 内联时，宽度和高度属性有效。当我不这样做时，如果它们位于不同的文件夹中，它们不会有任何影响。这是图片。 codepen.io/jalissaw/pen/gOaEvXg
@focus.style 是的，我只使用了两张图片。

标签： html css svg

【解决方案1】：

这将使机翼垂直居中并对齐。

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>

    <style>
    header {
      height: 100vh;
      width: 100%;
      overflow: hidden;
    }

      .airplane {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
      }

      .wings {
        position: a
          width: 50%;
          height: auto;
          top: 50%;
          transform: translateY(-50%);
          position: absolute;
      }

      .airplaneleft {
          left: 0;
          animation: left 2s forwards;
      }

      .airplaneright {
          right: 0;
          animation: right 2s forwards;
      }



    </style>

</head>
<body>

  <header>
          <div class="menu">
              <input type="checkbox" class="toggler">
              <span></span>
          </div>
          <nav class="navbar">
              <ul class="links">
                  <li class="link"><a href="#">Home</a></li>
                  <li class="link"><a href="#">About</a></li>
                  <li class="link"><a href="#">Aviation</a></li>
                  <li class="link"><a href="#">Contact</a></li>
                  <li class="link"><a href="#">Projects</a></li>
              </ul>
          </nav>
          <div class="intro">
              <h1 class="name"><span class="first">Jovan </span class="last"><span>Elmore</span></h1>
              <h2 class="title">Aviation Specalist</h2>
          </div>
          <div class="airplane">
              <img class="airplaneleft wings" src="2.svg" alt="left side of airplane">
              <img class="airplaneright wings" src="1.svg" alt="right side of airplane">
          </div>
      </header>

</body>
</html>

【讨论】：