How can I prevent an image from scaling down when the user zooms out?

Question

I have a object in HTML that is 200px by 200px. When the user zooms out, the image gets smaller. How can I make it so that when the user zooms their browser out, the image size stays the same? I don't care if it gets larger when zoomed in, I just need a solution to prevent the image from getting smaller when zoomed out. Here is what the related HTML looks like:

<div class="player">
   <img src="./avatars/Avatar2.png" class="playerimage">
</div>

And the related classes with related properties look like this:

.player {
  background: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* The player image is 1000px by 1000px but we scale it down */
.playerimage {
  width: 200px;
  height: 200px;
}

I have tried using min-width and min-height CSS values but this didn't work. Here is what the image looks like when the browser is at 100%: image

And this is what it looks like at 50% zoom: image

Answer 1

You can achieve this result by setting only width or height in vw/vh responsive units.

.player {
  background: none;
  position: absolute;
  top: 0;
  left: 0;
}

.playerimage {
  width: 20vw;
}

<div class="player">
  <img src="https://workmacro.com/wp-content/uploads/2018/02/1-by-1-1024x1024.png" alt="" class="playerimage">
</div>

Here's a Codepen example