How would one go about 'cropping' an image depending on the screen resolution?
Well you can get the screen details from window.screen - though personally I would recommend just finding out how big the current window is, the only reason not to is if you are going to resize the window and that is very frowned upon.
Once you know the sizes and how big you need to make your images, I find that images are cropped easiest by placing them inside a containing DIV with
overflow: hidden; set. You can then size the containing DIV to the size required and set the
left CSS attributes od the image to the negative values of the coordinate you want for the top-left visible corner.
<div class="crop-container" style="width: 200px; height: 200px; overflow: hidden;"> <img src="something-400x400.jpg" style="top: -100px; left: -100px;" width="400" height="400" alt="Something" /> </div>
©2020 All rights reserved.