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

Question

So I have two svg images and one is positioned left, and one is positioned right.所以我有两张 svg 图像，一张在左边，一张在右边。 They both have a height of 100% and a width of 50%.它们都有 100% 的高度和 50% 的宽度。 The images are not scaling to fit the container and I have tried everything.图像没有缩放以适应容器，我已经尝试了一切。 I've tried to fiddle with the viewbox but can't quite get it.我试图摆弄视图框，但不太明白。 The preserveAspectRatio almost gets it with none but it squashes the images when you resize the browser. preserveAspectRatio 几乎没有得到它，但是当您调整浏览器大小时它会挤压图像。 Slice almost gets it but one picture overlaps the other. Slice 几乎得到它，但一张图片与另一张重叠。 I have tried everything but is coming up empty.我已经尝试了一切，但都是空的。 Does anyone have any suggestion?有人有什么建议吗？ I'm trying to get rid of the white space and have the picture cover the background but css background: cover does not work.我正在尝试摆脱空白并让图片覆盖背景，但 css 背景：封面不起作用。

Here's my code:这是我的代码：

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>

Answer 1

This will center the wings vertically and set them in line.这将使机翼垂直居中并将它们对齐。

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

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

问题描述

1 个解决方案

解决方案1
1 2020-05-23 20:29:04

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

问题描述

1 个解决方案

解决方案1 1 2020-05-23 20:29:04

解决方案1
1 2020-05-23 20:29:04