修改窗口大小時的圖像大小（jQuery）

我試圖在頁面加載和瀏覽器調整大小時調整圖像大小。一些圖像將是肖像和一些風景，並且它們將位於也可以是縱向/橫向（取決於瀏覽器尺寸）的容器div中。如果圖像應該被拉伸以填充框（100％寬度或100％高度）並且如果比例不匹配則無關緊要，則會發生裁剪（通過CSS overflow:hidden）。修改窗口大小時的圖像大小（jQuery）

我的方法是獲取容器框（即portrate或風景）的比例，並獲得圖像比例（縱向或橫向），比較它們並相應地調整CSS寬度/高度。

注意：所有容器都有一個mr_our-dest-img-container的類，並且都將只包含1個img元素（以及一些不同的元素）。

這是我的代碼，這是行不通的。它什麼也沒做，我也弄不明白。有誰能幫我解決這個問題嗎？

$(document).ready(function() { 
    updateImageSize(); 
    $(window).resize(function() { 
     updateImageSize(); 
    }); 
}); 

function updateImageSize() { 
    $(".mr_our-dest-img-container").each(function(){ 
     var ratio_cont = jQuery(this).width()/jQuery(this).height(); 
     var $img = jQuery(this).find("img"); 
     var ratio_img = $img.width()/$img.height(); 
     if (ratio_cont > ratio_img) 
     { 
      $img.css({"width": "100%", "height": "auto"}); 
     } 
     else if (ratio_cont < ratio_img) 
     { 
      $img.css({"width": "auto", "height": "100%"}); 
     } 
    } 
};

來源

2014-01-15 Michael Ruta

谷歌Chrome控制檯給了我這個錯誤'未捕獲的SyntaxError：Unexpected token}'，並突出顯示了主要問題代碼中的最後一個大括號。我已經翻遍了這段代碼，大括號似乎全部取消了彼此？ –

這是一個語法錯誤，就像控制檯說的那樣。在each函數結束後，您錯過了)。

function updateImageSize() { 
    $(".mr_our-dest-img-container").each(function(){ 
     var ratio_cont = jQuery(this).width()/jQuery(this).height(); 
     var $img = jQuery(this).find("img"); 
     var ratio_img = $img.width()/$img.height(); 
     if (ratio_cont > ratio_img) 
     { 
      $img.css({"width": "100%", "height": "auto"}); 
     } 
     else if (ratio_cont < ratio_img) 
     { 
      $img.css({"width": "auto", "height": "100%"}); 
     } 
    }); //missing) 
};

來源

2014-01-15 11:59:21 qqfish

修改窗口大小時的圖像大小（jQuery）

回答

相關問題