缩略图仅显示部分图像

Question

我创建了一个流行的 post 小部件，缩略图似乎只显示了实际图像的一部分，而不是全部。

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script type='text/javascript'>                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize(&quot;PopularPosts1&quot;,300);                   
</script>

我已经检查了一百万次了，但无法弄清楚哪里出了问题。

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 300px;
margin-left: -10px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
color: #555555;
}

.PopularPosts .item-title {
clear:both;
font: 11px raleway;
color: #000;
text-transform: uppercase;
text-align: center;
margin-right: 10px;
}

.PopularPosts .item-title a{
color: #000
  }
.PopularPosts .item-title a:hover{
color: #515151
  }

.PopularPosts .item-snippet {
display: none;
}

.widget .widget-item-control a img {
height: 18px;
width: 18px;

}

</style>

有什么建议吗？？谢谢:)

Answer 1

你能 jsfiddle 你的代码吗？

我认为你可以使用 background-size: contain;，它将适合你的图像在你的拇指区域内。

查看：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

缩略图仅显示部分图像

Thumbnail only show part of image

html

css

widget