不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

使用JS让图片居中显示

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

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

不允许评论
粤ICP备17049187号-1