How to lock the scale of an html image in a custom character sheet

When uploading a png to my&nbsp;custom character sheet code, then opening the sheet in-game, scaling the pop-out window too far will cause the image to scale with the pop-out window, but my non-png html elements will stay in the same spot, causing it to look a mess. There's a threshold where the intended scale will stay correct, but I would like to have it so the scale is set in stone and doesn't change when I scale the pop-out window. Here's the code I use below, any help is appreciated! &lt;div class="image"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="<a href="https://i.imgur.com/Y52CMuO.png" rel="nofollow">https://i.imgur.com/Y52CMuO.png</a>" alt="sheet" style="width:100%;"&gt;&lt;/div&gt; .image { z-index: 0; }

Add a height or width the CSS for the image, of the size you actually want: .image { z-index: 0; height: 100px; width: 200px; } You don't need to include both. If you provide only one, the other should scale appropriately. Also get rid of style="width:100%;" in your image html.

Actually, thinking about it, do you need a div there? Is there anything else inside that div? If not, change it to something more like this: &nbsp;&lt;img src="<a href="https://i.imgur.com/Y52CMuO.png" rel="nofollow">https://i.imgur.com/Y52CMuO.png</a>" alt="sheet" class="image"&gt; Put that wherever you had the div. If you want to put certain styling around the image, you might want to use the div, but you can apply a lot of styles directly to the image.

Worked! Thank you so much!