Scaling ,Cropping images before it render into hmtl

I am developing a web application(pic sharing) using ember js.Now there is user feed just like Instagram have aspect I am showing two pic in same row.Now I have different images with different aspect ratio.Now wire frame of each image is width(310px) and height(296px).But when I apply the width and height to images.Some of them scale pretty good.But the other image (ex: image which are too wide or narrow ) doesn't reflect good in frame and looks crap.I am very new to the frontent and java-script stuff.So I am not able to think where to start or how to do it.So that image gets render properly in the html.Is there a way to crop or resize the pic in the javascript,So that it render in good shape.Please answer in details.Specify in tutorial if there.