【CSS】transform:scaleプロパティで要素を小さくすると、余白が入る

Question

例えば
transform: scale(0.6);を要素にかけてあげると、小さくはなるが親要素が持っている本来の大きさはそのままなので、
不自然な余白が生まれるような状態になってしまいます。
以下、コードに記述していますので、解決策を知りたいです。

<div class="point__img">
　<img src="img/point1.svg" alt="">
</div>

コード
ただの画像 画像自体が本来持っている大きさは
width:308px height386pxになります。

.point__img{
   transform: scale(0.6);
  img{
    display: block;
    }

  }
コード　レスポンシブ対応をした場合、元々の画像の大きさを小さくしたくtransformscaleプロパティを使用
ただ、0.6倍すると小さくなるが、画像が持っている本来の要素の大きさが変わっておらず不自然な余白が生まれている状態に

Answer 1

CSSのwidthやheightをvwやvhといった単位で指定するのではダメですか？
css vw vh - Google 検索

Comments

[退会済みユーザー]

ありがとうございました。

img{
height:auto
max-width:100%
}

を指定して、幅を小さくすれば解決しました。