Гуру CSS помогите обрезать картинку

Вот этот вариант мне кажется наиболее правильным, т.к. ИЕ сколько я его помню всегда был отсталым в развитии. Вопрос только в том, как правильно это скомбинировать, чтобы не было конфликтов ?

Думаю, прокатит примерно так: вставляем стили CSS для картинок

.crp_related img {
        top: 0;
        left: 0;
	height: 100%;
	width: 100%;
        object-fit: cover;
/** Only for IE  */
	//position: absolute;
	//height: ;
	//width: ;
        //object-fit: none;
}

<div class="crp_related ">
<ul id='ul1'>
<li><a href="http://www.site.ru/post-1/" rel="nofollow" target="_blank"><img src="1.jpg" alt="Заголовок 1" title="Заголовок 1" class="crp_thumb crp_correctfirst"><div class="crp_title">Заголовок 1</div></a></li>
<li><a href="http://www.site.ru/post-2/" rel="nofollow" target="_blank"><img src="2.jpg" alt="Заголовок 2" title="Заголовок 2" class="crp_thumb crp_correctfirst"><div class="crp_title">Заголовок 2</div></a></li>
<li><a href="http://www.site.ru/post-3/" rel="nofollow" target="_blank"><img src="3.jpg" alt="Заголовок 3" title="Заголовок 3" class="crp_thumb crp_correctfirst"><div class="crp_title">Заголовок 3</div></a></li>
</ul>
</div>

<!--[if IE]>
<script>
function adjust(img){
    var r,w,h,wmax,hmax;
    r=1.44;
    wmax=180;
    hmax=125;
    w=img.width;
    h=img.height;
    if(w/h<r){
      img.width=wmax;
      img.style.top=hmax/2-img.height/2+'px';
      img.style.offsetTop=img.style.top;
      img.style.offsetLeft=0;}
    else{
      img.height=hmax;
      img.style.left=wmax/2-img.width/2+'px';   
    }
}

document.body.onload=function(){
  var l=document.getElementById('ul1').children.length;
  for(var i=0; i<l; i++){ adjust(ul1.children.firstChild.firstChild) } 
}
</script>
<![endif]-->