Javascript Detect Screen Resolution, change css, crop images accordingly

Question

So I know how to change the css depending on the resolution via javascript.

How would one go about 'cropping' an image depending on the screen resolution?

Answer 1

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 top and 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>