縮放圖像無法按預期工作？

我使用scale變換縮小圖像。這工作正常，除了原始圖像大小用於計算頁面大小，所以我得到水平/垂直滾動在一個巨大的空白頁面。我對這是如何工作感到困惑，是不是應該縮小/放大圖像的比例？縮放圖像無法按預期工作？

我能以某種方式擺脫未使用的「額外」空間嗎？我不需要CSS唯一的解決方案，在這裏使用javascript是完全正確的。

小提琴： http://jsfiddle.net/kcYCm/

編輯

@jgv解決方案貼在下面做大小圖像正常，但它不具有縮放解決問題。

如果我們嘗試使用這種方法，而試圖縮放圖像，我們會得到一個有趣的效果。它僅放大圖像的一部分，滾動條再次顯示。所以當圖像縮小時，它不會影響其他圖像，但是當它被放大時，它會發生什麼？這是預期的嗎？

小提琴：http://jsfiddle.net/kcYCm/6/

來源

2013-07-17 caiocpricci2

你有圖像的所需最終尺寸的具體尺寸？我只是擺脫了'scale（）'CSS函數，併爲元素設置了一個特定的'width'，確保它正確調整大小：http://jsfiddle.net/kcYCm/3/ –

不是一個選項。我需要拍攝一張大尺寸的圖像，並將其縮小，以便稍後放大。它應該在移動設備上運行，所以我幾乎堅持'轉換'。 – caiocpricci2

嘗試包裹在一個div圖像和指定的包裝的尺寸。沒有CSS3，但它的工作原理。

<div style="height: 300px"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Les_Invalides_de_Paris_ceiling_huge.jpg" style="max-height: 100%; max-width: 100%"/> 
</div>

例子：http://jsfiddle.net/kcYCm/5/

來源

2013-07-17 14:18:50 jgv

這確實解決了問題，我在發佈之前到達那裏，但我正在尋找可以在使用該比例後修復它的內容。如果我找不到解決方案，我將不得不解決這個問題。謝謝！ – caiocpricci2

@ caiocpricci2對於將來的「縮放」或「高檔」事件，您可以通過一些簡單的JavaScript處理這個給定的解決方案來找到解決方法。 –

@jgv我對這個問題做了一個重大改變，我想它更好地解釋了問題所在！我已經給它另一個嘗試使用包裝，但它表現得很有趣，如果我試圖擴大它。 – caiocpricci2

縮放圖像無法按預期工作？

回答

相關問題