需要缩放 SVG 帮助

Question

为了使用相同的 height/width 缩放所有 SVG，我对以下 HTML/CSS 有点费劲。我创建了一个简单的设置，但我不知道该怎么做..

当我在浏览器中打开图像时，它们都被缩放（全屏）并且从尺寸上看都一样。但是在 HTML 中使用它时，我没有得到很好的结果。

非常感谢任何提示..

img {
 height: auto;
 width: 75%;
  
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- CUSTOM CSS -->
  <link rel="stylesheet" href="main.css">

  <title>Debugging</title>
</head>

<body>

  <!-- COURSES -->
  <div class="container courses-container">
    <div class="row ">
      <!--COURSE 1-->
      <div class="col-6 col-md-4 col-xl-2 course-item">
        <div class="card text-center">
          <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">
          <div class="card-body">
            <h5 class="card-title">Монстр один</h5>
            <p class="card-text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях.</p>
            <a href="#" class="btn btn-primary">Виж Повече</a>
          </div>
        </div>
      </div>
      <!--COURSE 2-->
      <div class="col-6 col-md-4    col-xl-2 course-item">
        <div class="card text-center">
          <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg">
          <div class="card-body">
            <h5 class="card-title">Монстр два</h5>
            <p class="card-text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях.</p>
            <a href="#" class="btn btn-primary">Виж Повече</a>
          </div>
        </div>
      </div>
      <!--COURSE 3-->
      <div class="col-6 col-md-4    col-xl-2 course-item">
        <div class="card text-center">
          <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg">
          <div class="card-body">
            <h5 class="card-title">Китара</h5>
            <p class="card-text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях.</p>
            <a href="#" class="btn btn-primary">Виж Повече</a>
          </div>
        </div>
</body>


</html>

Answer 1

它们的尺寸不同，请查看它们的视图框，
只需将 css 更改为

img {
  height: 183px;
  width : auto;
}

需要缩放 SVG 帮助

Scaling SVG help needed

html

css

scaling