css display:gridで中の要素に引きずられてgrid線がずれてしまう。

Question

概要

gridを使い縦の配置をいじっていたのですが、
imgの中にSVGをインポートすると、100vhの８分割文の1fr1よりもimgの元の要素が大きいようで、
その要素の大きさを拾って、wrapperのgrid線が1~2にかけて広がってしまいます。
wrapperで子の要素に引きずられずにgrid線を決めて、配置をしたいのですが解決方法がわかりませんでした。
![
gridの様子

試したこと

imgのsrcの中身がsvgなのですが、widthとheightが指定されていたので、100%に変更。

やりたいこと

①wrappergrid線を決めて、で子の要素に引きずられずに配置したい。
②gridの分割単位はレスポンシブな値が良い。

ソースコード

<div class="wrapper">
  <img class="image" src="~~"/>
</div>

.wrapper{
  display: grid;
  grid-template-rows: repeat(8,1fr);
  height:100vh;
}
.image{
  grid-row:1/2;
}