Резать к чертовой матери, не дожидаясь перитонитов!

Довелось мне тут по работе заняться веб версткой. Так как я "компьюторщик", то, стало быть, должен уметь делать и это. Не проблема! Надо - значит надо!
Одна из задач была следующая:
Имеется изображение. Необходимо его отобразить на страничке, но не целиком а только часть. Изображений много. Со временем их будет еще больше. Показывать надо только определенную часть. На мой вопрос: "А нельзя ли предварительно обрезать изображение по той части, которую надо показать и без всяких хитромудростей просто выводить на страничку?" я получил ответ: "Конечно можно! Обрезай!". На этом этапе стало ясно, что предварительно изображения мне готовить никто не собирается. Всё сам... Ну, сам так сам.
Приступим...

[Дальше идет простое решение проблемы, которое опытным веб программистам/дизайнерам/верстальщикам скорее всего будет не интересно]

Допустим есть у нас картинка (1600x1200)

и хочется нам оттуда показать заранее известную область. В моем случае будем показывать чайку ;)

Итак, картинку резать будем div'ным методом. HTML часть будет выглядеть вот так:

И теперь необходимо произвести, простите за грубость, обрезание. Для этого мы воспользуемся CSS:

.image-cutter{
     position: relative; /* Поведение окна: 
                              ограничитель для 
                              внутренних элементов 
                              и обычный элемент 
                              для внешних */
     /* Размеры окна */
     width: 300px;       /* Ширина окна */
     height: 300px;      /* Высота окна */
     overflow:hidden;    /* Всё, что не поместилось 
                            в окно - не показывать */
}
 
.image{
     position: absolute; /* Поведение изображения:
                              абсолютное (ручное) 
                              позиционирование */

     /* Смещение изображения в нужном направлении */
     top: -255px;        /* Положение верхней 
                            границы изображения */
     left: -835px;       /* Положение левой 
                            границы изображения */
}

В результате получим вот это:

Если вы видете чайку, то в вашем браузере этот способ точно работает!

Данный способ работает во всех современных браузерах. Мною было протестировано на Chrome 34.0.1847.116, Firefox 28, Opera 20, Safari 5.1.7 и IE 8-10 Ну и конечно же куда без недостатков: изображение подгружается полностью, что может быть критичным при медленном соединении и "тяжелом" изображении. Вот и всё, что я могу сказать по этому поводу.