how can I crop thumbnails into 1:1 size instead of adapting to the image size

Question

LINK 1 - here is a visual of what I want

LINK2 - here is the link for my sample blog. the elements are on Related Posts under the sample image post

1. is the result of the code snippet below. You can see in the LINK 2 I provided the thumbnails are not in the same height.
2. is what i want ti look like. it crops the thumbnail to fit 1:1 size.
3. i dont want it to stretch like this

sorry about my english and for a very long code snippet. Also, I am no very familiar with Javascript yet.

Can you help me understand how to do it ?

Thank you.

div#related-posts {font-size: 16px;display: inline-block;width: 100%;}
div#related-posts h5 {font-size: 16px;text-transform: uppercase;margin: 0 0 25px;padding-bottom:15px;font-weight: 900;letter-spacing: 1px;text-align:center;position:relative;}
div#related-posts h5:after {content: "";position: absolute;width: 4px;height: 4px;background: #222;border-radius: 50%;bottom: 0;left: 47%;box-shadow: 1em 0px 0px 0px #222,2em 0px 0px 0px #222;}
div#related-posts ul {padding: 0;margin: 0;}
div#related-posts ul li {
list-style: none;
display: block;
float: left;
width: 10%;
padding: 0;
margin: 1px;
text-align: center;
position: relative;}

div#related-posts img {
padding: 0;
width:100%;
height:auto;
}
a.related-thumbs {position: relative;display: block;}
a.related-thumbs:before{opacity:1;}

a.related-title {
font-weight: 400;
font-size: 13px;
line-height: 1.7;
display: none;
padding-top: 0;
letter-spacing: 1px;
margin: 0;
color: #333;
position: absolute;
top: 4.5%;
left: 5%;
width: 90%;
height: 90%;
background: rgba(255, 255, 255, 0.8);
}

<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry="<h5>Related Posts</h5>";rn="<h5>No related post available</h5>";rcomment="comments";rdisable="disable comments";commentYN="no";var dw="";titles=new Array;titlesNum=0;urls=new Array;timeR=new Array;thumb=new Array;commentsNum=new Array;comments=new Array;
function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if("thr$total"in d)commentsNum[titlesNum]=d.thr$total.$t+" "+rcomment;else commentsNum[titlesNum]=rdisable;if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if("media$thumbnail"in d)thumb[titlesNum]=d.media$thumbnail.url;else thumb[titlesNum]="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++)if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}
function contains(b,d){for(var c=0;c<b.length;c++)if(b[c]==d)return true;return false}
function printRelatedLabels(a){var y=a.indexOf("?m=0");if(y!=-1)a=a.replace(/\?m=0/g,"");for(var b=0;b<urls.length;b++)if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0)dw+=rn;else{dw+=ry;dw+="<ul>";while(b<titles.length&&b<20&&b<maxresults){if(y!=-1)urls[c]=urls[c]+"?m=0";if(commentYN=="yes")comments[c]=" - "+commentsNum[c];else comments[c]="";dw+='<li class="related_gallery"><a href="'+
urls[c]+'" title="'+titles[c]+'" rel="nofollow" class="related-thumbs"><img alt="'+titles[c]+'" src="'+thumb[c].replace(/\/s72\-c/,"/s"+size+"")+'"/></a><a class="related-title" href="'+urls[c]+'">'+titles[c]+"</a></li></div>";if(c<titles.length-1)c++;else c=0;b++}dw+="</ul>"}urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById("related-posts").innerHTML=dw};

//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=10;
var size = 250;
removeRelatedDuplicates();
printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>

Answer 1

You can try background-image property of CSS instead of using the <img> in HTML.

You can see all the images have different resolutions but using background-image property we've cropped all of them into 1:1 ratio

Have a look at the example snippet below to have a better understanding:

.div-holder {
  margin: 10px;
  border: 1px solid #000;
}

h3 {
  margin: 10px 0 5px;
  padding: 0 10px;
}

.img-holder {
  display: flex;
  flex-wrap: wrap;
}
.img-holder img {
  margin: 10px;
  align-self: center;
}
.img-holder .image {
  width: 150px;
  height: 150px;
  margin: 10px;
  background-size: cover;
  background-position: center;
}

body {
  margin: 0;
}

<div class="div-holder">
  <h3>Actual Image Sizes</h3>
  <div class="img-holder">
    <img  src="http://lorempixel.com/200/120/sports/1">
    <img  src="http://lorempixel.com/200/150/sports/2">
    <img  src="http://lorempixel.com/200/180/sports/3">
  </div>
</div>

<div class="div-holder">
  <h3>Cropped Image Sizes (1:1)</h3>
  <div class="img-holder">
    <div class="image" style="background-image: url('http://lorempixel.com/200/120/sports/1')"></div>
    <div class="image" style="background-image: url('http://lorempixel.com/200/150/sports/2')"></div>
    <div class="image" style="background-image: url('http://lorempixel.com/200/180/sports/3')"></div>
  </div>
</div>

Hope this helps!