参照metronic的User Cards效果做一个素材管理的小模块,发现metronic使用的图片大小是一致的,出来的效果非常好看,而我们实际使用时,图片往往是大小不同,比例不同,直接套用,出来的效果往往并不好看。这种情况,在我们使用UED制作的静态HTML的时候,也经常出现。为了达到同样的效果,我们需要增加一些代码来处理。
metronic的User Cards的效果:

他使用的HTML结构是:
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="mt-card-item">
<div class="mt-card-avatar mt-overlay-1">
<img src="../assets/pages/img/avatars/team5.jpg" />
<div class="mt-overlay">
<ul class="mt-info">
<li>
<a class="btn default btn-outline" href="javascript:;">
<i class="icon-magnifier"></i>
</a>
</li>
<li>
<a class="btn default btn-outline" href="javascript:;">
<i class="icon-link"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="mt-card-content">
<h3 class="mt-card-name">Jennifer Lawrence</h3>
<p class="mt-card-desc font-grey-mint">Creative Director</p>
<div class="mt-card-social">
<ul>
<li>
<a href="javascript:;">
<i class="icon-social-facebook"></i>
</a>
</li>
<li>
<a href="javascript:;">
<i class="icon-social-twitter"></i>
</a>
</li>
<li>
<a href="javascript:;">
<i class="icon-social-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
不做任何处理,因为图片大小、比例不同,出来的效果,差强人意:

解决这个问题,可以使用CSS的方式来实现,也可以使用JS的方式。现在使用JS的方式来解决这个问题。我们在图片的load事件代码中,增加处理脚本,如下:
var pheight = $(this).closest(".mt-card-avatar").height();
if ($(this).height() < pheight) {
$(this).css({
width: "auto",
height: pheight
});
}
出来的效果如下:

从效果上,明显已经比不做处理的要好很多。但是仔细观察,还是有些不如人意的地方,比如第一行,第四个图片,原图是:

很明显,现在只是显示了图片的最左边的内容,把主要的部分给隐藏了。一般的图片,在构图的时候,把更多的主要内容,都会放在图片的中间区域。可以对load的脚本做一些小调整,如下:
var pheight = $(this).closest(".mt-card-avatar").height();
if ($(this).height() < pheight) {
$(this).css({
width: "auto",
height: pheight
});
//将图片居中显示
var width = $(this).width();
var pwidth = $(this).closest(".mt-card-avatar").width();
var left = (width - pwidth) / 2.0;
$(this).css({
left: -1 * left
});
}
这样出来的效果,较上一个,更能显示出图片所要表达的内容。
