Image not adjusting on different screens - html

Question

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.

Answer 1

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>

Answer 2

The best way to limit the size of an image based on the user's browser window is to use CSS media queries. CSS media queries allow you to specify different styling rules for different screen sizes. For example, you could use the following media query to make the image smaller on smaller windows:
#media (max-width: 500px) {
.image {
max-height: 10%;
width: auto;
}
}
This will make the image 10% of the maximum height of the window when the window is 500px or smaller. You can also use media queries to specify different styling rules for different window sizes. For example, you could use the following media query to make the image larger on larger windows:
#media (min-width: 1000px) {
.image {
max-height: 20%;
width: auto;
}
}
This will make the image 20% of the maximum height of the window when the window is 1000px or larger.