響應全屏img不裁剪

我正在嘗試作出響應全屏圖像調整大小，以適應瀏覽器窗口沒有任何裁剪髮生。響應全屏img不裁剪

到目前爲止，我的起點是在圖像上設置max-width: 100%，以便填充頁面的寬度。但是，如果窗口的高度發生變化，我需要它從max-width: 100%切換到max-height: 100%，這樣圖像就不會收穫。

我認爲要做到這一點的唯一方法是找出哪個方面更大，然後更改CSS以相應地使用max-width: 100%或max-height: 100%。

以下是目前的代碼。它的工作原理是寬度，但不是用身高調整時：

$(document).on("ready", function() { 

    resizeImage($("#image"), $(window)); 

    $(window).on("resize", function() { 
     resizeImage($("#image"), $(window)); 
    }); 

}); 

function resizeImage(image, container) { 

    var widthRatio = Math.min(image.width()/container.width()), 
     heightRatio = Math.min(image.height()/container.height()); 

    if (heightRatio > widthRatio) { 
     image.css({ 
      "max-width" : "none", 
      "max-height" : "100%" 
     });  
    } 
    else { 
     image.css({ 
      "max-width" : "100%", 
      "max-height" : "none" 
     }); 
    } 
}

這裏的標記：

<div class="imageContainer"> 
    <img src="ferrari5.jpg" id="image"> 
</div>

這裏有一個CodePen例如：

http://cdpn.io/yAHeb

來源

2014-02-10 Chris Spittles

容器最大寬度：100％，最大高度：100％？如果沒有，您只是將問題從圖像轉移到容器。一個http://jsfiddle.net/會有所幫助。 –

您的評論讓我想到了答案！我認爲這是一個JS問題，但我將img標記更改爲塊級元素，並將html和body標記設置爲100％高度： http://codepen.io/chrissp26/pen/yAHeb If你發表你的評論作爲答案我會接受它。 –

容器最大寬度：100％，最大高度：100％？如果沒有，您只是將問題從圖像轉移到容器。 jsfiddle.net會有所幫助。

很高興幫助:)

來源

2014-02-10 16:16:09

你有沒有試着用CSS使用：

background-size: cover;

希望它有幫助！

來源

2014-02-10 15:59:48 QuarK

嗨，感謝您的回覆。我沒有使用背景圖片，它是一個img標籤。 –

響應全屏img不裁剪

回答

相關問題