Responsive Model (not modal) Image using CSS and HTML

I am currently working on a website design using HTML and CSS and I want to position this img:

to fit in the page like this:

I need it to be responsive.

What I did for its part is:

HTML:

<div class="intro">
    <img src="https://i.stack.imgur.com/GGDym.png" class="sensei-img">
</div>

CSS:

.intro {
  width: 100vw;
  height: 100vh;
  position: relative;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  overflow: overlay;
  display: flex;
  flex-direction: row;
}
.intro .sensei-img {
  position: absolute;
  left: 5vw;
  bottom: -10vh;
  width: 70vw;
  height: 100vh;
}

I can position the image perfectly with position:absolute; but I can’t seem to be able to make it’s size responsive. What should I do?

>Solution :

For its ratio to be kept even if the viewport changes you can simply remove this property:
.intro .sensei-img {height: 100vh;}

The image will keep it’s aspect ratio by default.