Как сделать так, чтобы изображение автоматически обрезалось под размеры div'a и соответственно находилось в нём.

Наилучший вариант https://jsfiddle.net/nhhtp0o4/
картинка центруется и по вертикали и по горизонтали, можно задать режим сжатия, лишнее обрезается.
Помудрив, можно сделать, чтоб картинка умещалась по минимальной стороне, лишнее обрезалось.
Я несколько лет назад делал целый расчет, как правильно обрезать картинки, скачивал с инета сотни случайных картинок, чтоб полноценно проанализировать. Пришел к выводу, что по горизонтали надо центровать (что естесственно, и не анализировалось), а по вертикали сверху обрезать 1/5 от картинки. И это все из за того, что если на картинке будут лица, чтоб они остались в кадре. (в данном примере по вертикали центруется, картинку специально выбирал с девушкой в центре)

Есть несколько вариантов:
1) Изображение - фон блока - тогда вам нужно использовать css для работы с фоном:
background-size: cover - масштабирование фона под контейнер - подробнее почитайте в онлайн учебниках
2) Изображение - картинка внутри блока и вам нужно подогнать размеры картинки под блок:
div {
width: 300px;
height: 200px;
overflow: hidden; /* Обрезка картинки, если она выходит за пределы блока */
}
далее подстройка по ширине - ширина изображения будет равна ширине блока, высота подставится автоматом, с соблюдением пропорций
div img {
width: 100%;
height: auto;
}
или подстройка по высоте - высота изображения будет равна высоте блока, ширина подставится автоматом, с соблюдением пропорций
div img {
width: auto;
height: 100%;
}

3) Изображение - картинка внутри блока - нужно чтобы у картинки были исходные размеры, но при этом она была в блоке и была в нем по центру - нечто похожее у вас и нарисовано - тот же overflow:hidden - для блока что и в пункте 2) - но придется писать скрипт для центровки картинки внутри.

Именно обрезалось или изменялись размеры?