I am facing an issue with an HTML element that is originally 200px by 200px. When the user zooms out, the image shrinks in size. How can I ensure that the image remains the same size regardless of the browser zoom level? I only need a solution to prevent the image from getting smaller when the browser is zoomed out. Here is a snippet of the relevant HTML code:
<div class="player">
<img src="./avatars/Avatar2.png" class="playerimage">
</div>
Below are the related classes along with their properties:
.player {
background: none;
position: absolute;
top: 0;
left: 0;
}
/* The player image is initially 1000px by 1000px but it's scaled down */
.playerimage {
width: 200px;
height: 200px;
}
I have attempted using min-width and min-height CSS values, but they did not solve the issue. This is how the image appears at 100% browser zoom: image
And this is how it looks at 50% zoom: image