html代码结构:
复制代码 代码如下:
样式:
复制代码 代码如下:
a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 这里需要指定a标签的高宽,背景和边框为可选 */
脚本(jquery可自行添加):
复制代码 代码如下:
$(function () {
    var imgs = $('a>img');
    imgs.each(function () {
        var img = $(this);
        var width = img.attr('width');//区域宽度
        var height = img.attr('height');//区域高度
        var showwidth = width;//最终显示宽度
        var showheight = height;//最终显示高度
        var ratio = width / height;//宽高比
        img.load(function () {
            var imgwidth, imgheight, imgratio;
            $('').attr('src', img.attr('src')).load(function () {
                imgwidth = this.width;//图片实际宽度
                imgheight = this.height;//图片实际高度
                imgratio = imgwidth / imgheight;//实际宽高比
                if (ratio > imgratio) {
                    showwidth = height * imgratio;//调整宽度太小
                    img.attr('width', showwidth).css('margin-left', (width - showwidth) / 2);
                } else {
                    showheight = width / imgratio;//调高度太小
                    img.attr('height', showheight).css('margin-top', (height - showheight) / 2);
                }
            });
        });
    });
});
这样就是实现了图片的等比例放大缩小了。