Как с помощью CSS сделать обрезку картинки до определенного размера?
Вот вам правильный ответ =)img{
    object-fit: cover;
    width: 100px;
    height: 100px;
}
Этот класс растянет картинку на всю ширину блока, и автоматически построит ее высоту..img-reponsive {
display:block;
width:100%;
max-width:100%;
height:auto;
}
ну и похожий класс описать для варианта 100% hegit и width:auto;
1. Вы используете бутстрап, там этот код уже есть (написанный в этом примере), удалите его из своих стилей, в Ашем случае достаточно просто к картинке добавить img-responsive.
2. Если надо ограничить по высоте, то можно сделать например так:<div class="img-block">
    <img class="img-responsive" src="assets/img/636889-1366x768(1).jpg">
</div>
ну и .img-block {
    height: 200px;
    overflow: hidden;
}