jquery實現頁面圖片等比例放大縮小功能_jquery

html程式碼結構:

複製程式碼 程式碼如下:

樣式:

複製程式碼 程式碼如下:

a{width:300px; #fff;border:1px solid #666;display:inline-block} /* 這裡需要指定a標籤的高寬,背景和邊框為可選*/
腳本(jquery可自行添加):

複製程式碼 程式碼如下:

$(function () {


$ $('a>img');
    imgs.each(function () {
        var img = $(this);
      var img = $(this);
   
        var height = img.attr('height');//區域高度
        var showWidth = width        var ratio = width / height;//寬高比
        img.load(function () {
           '').attr('src', img.attr('src')).load(function () {
                imgWidth = this.width;/1  /圖片實際高度
                imgRatio = imgWidth / imgHeight;//實際寬高比
                if (ratio > imgRatio) {
    /調整寬度太小
                    img.attr('width', showWidth).css( 'margin-left', (width - showWidth) / 2);
                } else {                    img.attr('height', showHeight). css('margin-top', (height - showHeight) / 2);
                }
        });
});



這樣就是實現了圖片的等比例放大縮小了。