Image not adjusting on different screens

I am attempting to, as the title suggests, limit the size of an image based on the user’s browser window. The code that does this is below:

.image {
  max-height: 15%;
  width: auto;
}

This class was referenced here:

<ul>
  <li>
    <img class="image" src="imgs/pie-chart.png">
  </li>
</ul>

I am trying to make the image became smaller on smaller windows, or at its max size on larger windows. However, nothing is happening to the image itself when I try to display it on the webpage. Also, if it helps, I am using bootstrap with this.

>Solution :

I think you can use viewport width (vw). There is also a viewport height(vh). Try to click "full page" and resize browser window.

.image {
  max-height: 15%;
  width: 10vw;
}

<ul>
  <li>
    <img class="image" src="https://pngimg.com/d/free_PNG90785.png">
  </li>
</ul>