How to chop and resize the images together when loading the images in the browser?

I have an E-Commerce application that has a lot of images to be loaded dynamically on the website. Currently, if i just want to display a certain portion of the images (resized to the required size from the original size to fit in the browser), I have to do it manually every time and save those images in the hard drive to use it in the program.

Is there any way in HTML that can resize (say, shrink the image to half of the original size) and display a certain portion of the resized image (say, the left 50% of the resized image) in the same time? I know I can do each of the two tasks in HTML, but I can't find a way to do it both in one time. I think this should be quite a common problem for the big e-commerce website with a lot of images to be resized and sliced as required dynamically when loaded in the browser. Any hint of the solution will really be appreciated. Thanks a lot for the help!