I am faced with a situation where I have a segment of HTML code featuring images that can be resized or zoomed in simply by adjusting their width and height. My goal is to replace these images with CSS Sprites in order to load just one file instead of multiple ones. The issue lies in the fact that when applying a background to a div, resizing the div does not proportionally resize the background image.
Is there a method that is compatible with most browsers to load specific cropped portions of an image and then scale them as if they were stand-alone images? Any suggestions on how to achieve this?
Update: It is important that the image(s) only load once, and any resizing should happen on the client side to enhance user experience when interacting with the image.