title: how can I crop thumbnails into 1:1 size instead of adapting to the image size
body: <p><a href="https://i.stack.imgur.com/NycY8.jpg" rel="nofollow noreferrer">LINK 1 -  here is a visual of what I want</a></p>
  
  <p><a href="http://pr0x1ma1.blogspot.com/2016/12/dasd-as-a4d456a4.html" rel="nofollow noreferrer">LINK2 - here is the link for my sample blog. the elements are on Related Posts under the sample image post</a></p>
  
  <ol>
  <li>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. </li>
  <li>is what i want ti look like. it crops the thumbnail to fit 1:1 size.</li>
  <li>i dont want it to stretch like this</li>
  </ol>
  
  <p>sorry about my english and for a very long code snippet.
  Also, I am no very familiar with Javascript yet.</p>
  
  <p>Can you help me understand how to do it ?</p>
  
  <p>Thank you. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='related-posts'&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[
  var ry="&lt;h5&gt;Related Posts&lt;/h5&gt;";rn="&lt;h5&gt;No related post available&lt;/h5&gt;";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&lt;c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a&lt;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&lt;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&lt;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&lt;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+="&lt;ul&gt;";while(b&lt;titles.length&amp;&amp;b&lt;20&amp;&amp;b&lt;maxresults){if(y!=-1)urls[c]=urls[c]+"?m=0";if(commentYN=="yes")comments[c]=" - "+commentsNum[c];else comments[c]="";dw+='&lt;li class="related_gallery"&gt;&lt;a href="'+
  urls[c]+'" title="'+titles[c]+'" rel="nofollow" class="related-thumbs"&gt;&lt;img alt="'+titles[c]+'" src="'+thumb[c].replace(/\/s72\-c/,"/s"+size+"")+'"/&gt;&lt;/a&gt;&lt;a class="related-title" href="'+urls[c]+'"&gt;'+titles[c]+"&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;";if(c&lt;titles.length-1)c++;else c=0;b++}dw+="&lt;/ul&gt;"}urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById("related-posts").innerHTML=dw};
  
  //]]&gt;&lt;/script&gt;
  &lt;b:loop values='data:post.labels' var='label'&gt;
  &lt;script expr:src='&amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;quot;' type='text/javascript'/&gt;
  &lt;/b:loop&gt;
  &lt;script type='text/javascript'&gt;
  var maxresults=10;
  var size = 250;
  removeRelatedDuplicates();
  printRelatedLabels(&amp;#39;&lt;data:post.url/&gt;&amp;#39;);&lt;/script&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>