How to crop boostrap image to get width 285 and height 170 of all images?

I have difference size of images and I want it to have the same width and height and make it still responsive. So how to do this?

Solution

Have you ever heard of object-fit?

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

Here's an example of what object-fit does to your image, and how it can be used: http://jsfiddle.net/8ba7zjhs/

HTML

<img class="niceImage" src="http://assets1.ignimgs.com/2013/09/17/trevorjpg-883566_1280w.jpg">

CSS

.niceImage {
    width: 385px;
    height: 140px;
    object-fit: cover;
    object-position: center;
}

Learn more about object-fit here:
> css-tricks object-fit
> Mozilla object-fit

Note: All the browsers support object-fit nowadays except for Internet explorer, who is still considering to implement it as well.