Вы должны сделать это на стороне сервера. С административным скриптом. Вы можете создавать версии исходного изображения при его загрузке, тогда эти изображения можно безопасно использовать на стороне HTML / CSS.
Это не задача для клиента. По сути, вы здесь загружаете большое изображение (большое количество данных), а затем ошеломляете его, чтобы создать уменьшенное изображение. Таким образом, вы тратите впустую пропускную способность клиента и пропускную способность сервера.
Если нет абсолютно никакой возможности, и у вас есть фиксированная область, скажем, 640x480, то вы можете добиться элементарной обрезки с сохранением соотношения сторон следующим образом:
HTML:
<div id="wrapper"><img src="my.jpg"></div>
CSS:
#wrapper {
width: 640px;
height: 480px;
line-height: 480px;
}
#wrapper img {
width: 640px;
}