本文將利用jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大和縮小。說(shuō)明: 頁(yè)面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個(gè)問(wèn)題設(shè)計(jì)

html代碼結(jié)構(gòu):

復(fù)制代碼代碼如下:

<a href=""><img src="images/tmp_376x470.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_409x265.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_572x367.jpg" width="300" height="300" alt=""/></a>

樣式:

復(fù)制代碼代碼如下:

a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 這里需要指定a標(biāo)簽的高寬,背景和邊框?yàn)榭蛇x */
腳本(jquery可自行添加):

復(fù)制代碼代碼如下:

$(function () {
    var imgs = $('a>img');
    imgs.each(function () {
        var img = $(this);
        var width = img.attr('width');//區(qū)域?qū)挾?BR>        var height = img.attr('height');//區(qū)域高度
        var showWidth = width;//最終顯示寬度
        var showHeight = height;//最終顯示高度
        var ratio = width / height;//寬高比
        img.load(function () {
            var imgWidth, imgHeight, imgratio;
            $('<img />').attr('src', img.attr('src')).load(function () {
                imgWidth = this.width;//圖片實(shí)際寬度
                imgHeight = this.height;//圖片實(shí)際高度
                imgRatio = imgWidth / imgHeight;//實(shí)際寬高比
                if (ratio > imgRatio) {
                    showWidth = height * imgRatio;//調(diào)整寬度太小
                    img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);
                } else {
                    showHeight = width / imgRatio;//調(diào)高度太小
                    img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
                }
            });
        });
    });
});