Here you have my working example. I have used a trick that is setting the image as background of the div container with background-size:cover and background-position:center center
I have placed the image with width:100% and opacity:0 making it invisible. Note that I am showing my image only because I have an special interest on calling the child click event.
Please note that altought I am ussing angular it is completely irrelevant.
<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
<img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
</div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>
The result is the one that you define as optimal in all cases