Ну, вы можете получить детали экрана из window.screen - хотя лично я бы порекомендовал просто узнать, насколько велико текущее окно, единственная причина не делать это, если вы собираетесь изменить размер окнаи это очень неодобрительно.
Как только вы знаете размеры и размер, который вам нужен, чтобы сделать ваши изображения, я нахожу, что изображения обрезаются легче всего, помещая их в содержащий DIV набор overflow: hidden;.Затем вы можете изменить размер содержащего DIV до требуемого размера и установить для атрибутов CSS top и left od изображения отрицательные значения координаты, которую вы хотите для верхнего левого видимого угла.
<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>