我怎樣可以剪裁成縮略圖1:1尺寸，而不是適應圖像尺寸

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. 是我想TI的樣子。它裁剪縮略圖以適應1：1大小。
3. 我不希望它伸展這樣

對不起我的英語和一個很長的代碼段。 另外，我還不是很熟悉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

你可以嘗試CSS的background-image屬性，而不是在HTML中使用<img>的。

你可以看到所有的圖像具有不同的分辨率，但使用background-image財產我們裁剪所有的人都爲1：1的比例

看一看下面的例子代碼段有更好的理解：

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

希望這有助於！