響應式圖像最大高度100％不工作在Firefox中

我目前正在嘗試根據瀏覽器尺寸調整圖像大小。我已經設法讓圖像水平調整大小，如果我讓瀏覽器窗口縮小圖像將按比例調整大小。但是，當我垂直調整窗口大小時，Firefox似乎並不想這樣做！該代碼非常簡單響應式圖像最大高度100％不工作在Firefox中

<body> 

    <div id="content"> 
     <img src="images/abc.jpg"> 
    </div>  

</body>

和CSS：

#content { 
    height: 100%; 
    padding: 50px; 
} 


#content img{ 
    max-height:100%; 
    max-width: 100%; 
}

另一個問題是，圖像確實似乎在鍍鉻垂直調整，但我不得不拖動瀏覽器底部井在開始做這件事之前在圖片上。可以這麼說，只要底部內容填充「撞到」圖像的底部，我寧願圖像開始重新渲染。希望這是有道理的。

任何幫助非常讚賞

來源

2012-08-06 bestfriendsforever

你能提供的圖像樣本？ 'abc.jpg'有哪些尺寸？ – orique 2012-08-06 15:15:32

我認爲自使用填充以來#content的高度可能會超過100％。基本上，它從頂部和底部增加了50 + 50！要檢查，你可以嘗試給身體一個特定的高度 – 2012-08-06 15:17:06

好的，abc.jpg很大。這樣您就可以在任何屏幕上看到更多細節。說1500 x 1000 px – bestfriendsforever 2012-08-06 15:19:23

因爲高度可能永遠持續下去，你不能設置任何東西相對於瀏覽器窗口的高度是百分比的函數。我要說的是，你需要把它放在一個固定高度的東西里，以便使用百分之一的價值。祝你好運！

-b

來源

2012-08-06 15:20:37 OneChillDude

好的，謝謝。儘管這會影響這個圖像的目的，因爲我希望它調整到高度以及瀏覽器的大小，以便您可以調整瀏覽器的大小來「放大」。似乎在[本網站]上工作正常http://www.olivierhess.com/） – bestfriendsforever 2012-08-06 15:30:44

你只有指定的「最大高度」和「最大寬度」屬性。如果您未指定實際的「寬度」或「高度」屬性，則圖像初始化將獲取其物理尺寸的寬度和高度（如果不大於指定的最大高度和最大寬度）。

說的是，你注意到的行爲是正確的。如前所述，答案是指定一個初始寬度或高度屬性，取決於您的圖像是縱向還是橫向。

來源

2012-08-06 15:20:59 hotS85

試試這個，從Twitter採取引導2

html,body{height:100%;} 
#content {padding: 5%;} 
#content img { 
max-height: 100%;/* Part 1: Set a maxium relative to the parent */ 
width: auto\9; 
/* IE7-8 need help adjusting responsive images */ 
max-width: auto; 
/* Part 2: Scale the height according to the width, otherwise you get stretching */ 
vertical-align: middle; 
border: 0; 
-ms-interpolation-mode: bicubic; 
}

來源

2012-12-13 08:32:37

這似乎不適用於我。你可以提供演示嗎？ – KatieK 2013-08-05 23:30:20

是that你想要什麼？

我其實剛剛爲html和body添加了一個高度，所以#contents的高度不會很高。

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

（和箱尺寸：邊界框＃內容，因爲它似乎是你想要的）

來源

2012-12-13 08:43:04 dave

響應式圖像最大高度100％不工作在Firefox中

回答

相關問題