javascript - 如何将缩略图裁剪成 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. 是下面代码片段的结果。您可以在 LINK 2 中看到我提供的缩略图高度不同。
2. 是我想要的样子。它会裁剪缩略图以适合 1:1 的大小。
3. 我不希望它像这样拉伸(stretch)

对不起我的英语和很长的代码片段。 另外，我对 Javascript 还不是很熟悉。

你能帮我理解怎么做吗？

谢谢。

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

你可以试试background-image CSS 属性而不是使用 <img>在 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

请查看下面的示例片段以更好地理解:

.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>

希望这对您有所帮助!