Если зайти на blog.squarespace.com/blog/squarespace-student-discount и поиграть с разрешением экрана, то можно увидеть, как меняется размер фотографии, что слева. Смотрю стиль изображения -- в зависимости от разрешения меняются и отступы.
<img class="main-image loaded" data-src="http://static.squarespace.com/static/4f6792f624ac778428aca39d/4f760d4b6a9b61f6cc2748c3/5334299ce4b0e0212de80367/1395934603792/Stocksy_txp7337bc5bAH4000_Large_39427.jpg" data-image="http://static.squarespace.com/static/4f6792f624ac778428aca39d/4f760d4b6a9b61f6cc2748c3/5334299ce4b0e0212de80367/1395934603792/Stocksy_txp7337bc5bAH4000_Large_39427.jpg" data-image-dimensions="2924x1949" data-image-focal-point="0.6538461538461539,0.4411764705882353" data-load="true" alt="Squarespace Student Discount" src="http://static.squarespace.com/static/4f6792f624ac778428aca39d/4f760d4b6a9b61f6cc2748c3/5334299ce4b0e0212de80367/1395934603792/Stocksy_txp7337bc5bAH4000_Large_39427.jpg?format=1000w" data-image-resolution="1000w" style="top: -37px; left: 0px; width: 683px; height: 456px; position: relative;">
Что-то мне подсказывает, что и data-image-focal-point="0.6538461538461539,0.4411764705882353" неспроста указан.
Как реализовать похожий функционал?