Dean's blog

参照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
    });
}

这样出来的效果，较上一个，更能显示出图片所要表达的内容。