Chrome Squishing <img>關於瀏覽器高度調整

工作在一個跨瀏覽器的超級簡單的用戶界面，模仿谷歌文檔演示文稿編輯器。我發現的問題是用戶界面的正確部分，其中包含大型幻燈片/圖像預覽和附帶的「筆記」抽屜。

我的基本的HTML骨架：

<div class="container"> 

    <div class="preview"> 
     <img src="http://lorempixel.com/800/600/business" />   
    </div> 

    <div class="otherthing"> 
     This is another UI thing, 20% height  
    </div> 

</div>

並處理液比例與瀏覽器調整大小的CSS：

body, html{ 
    width:100%; 
    height:100%; 
} 

*{ 
    box-sizing:content-box; /* ie */ 
    box-sizing:border-box; /* all others */ 
    -moz-box-sizing:border-box; /* except firefox */ 
} 

.container{ 
    width:100%; 
    height:100%; 
    position:relative; 
} 

.preview{ 
    width:100%; 
    height:80%; 
    position:relative; 
    text-align:center; 
} 

.preview img{ 
    height:90%; 
    width:auto;  
} 

.otherthing{ 
    width:100%; 
    height:20%; 
    background:#369; 
}

這個工程在火狐，Safari，Opera和IE回到8！但是，在Chrome瀏覽器中，如果您調整瀏覽器高度（只是高度），則將標記壓扁，直到瀏覽器寬度也被調整爲止。如果您調整寬度和高度，它會完全縮放。

這裏的小提琴：http://jsfiddle.net/zb5ek/

任何人有任何想法是怎麼回事/我能做些什麼來解決這個問題？這是一個黑暗的日子，當你發現一個鉻只臭蟲:)

來源

2014-01-29 chrisgonzalez

什麼版本的Chrome，這是什麼？除非我誤解了，否則在我的Chrome（32）中可以正常工作。 – Joeytje50

@ Joeytje50 Mac OSX Mavericks，Chrome 32.0.1700.102。你在Windows上嗎？ – chrisgonzalez

這花了一段時間，但我能夠在Chrome 32中創建問題。我不得不完全放大窗口，放開鼠標然後嘗試縮小它。肯定很奇怪...... –

試試這個

.preview img{ 
    max-height:90%; 
    max-width:100%;  
}

使用最大高度和最大寬度將使其按比例增減。

來源

2014-01-29 17:02:17 codeaddict

它是一個密切的建議，但按比例縮放意味着最大的諷刺是決定什麼更重要 - 寬度或 - 高度。如果所有元素都需要放在100像素寬度內，那麼寬度是最大的問題。儘管高度仍然可以設置爲自動。 IMO。 – Cam

這絕對修復它在鉻！ ie8，但是......它按比例縮小比例，但是當我縮小瀏覽器備份時，圖像不會隨之縮放。胡言亂語ie8 =正常雖然:)謝謝！ – chrisgonzalez

@chrisgonzalez NP，不要忘記標記答案:) – codeaddict

您設置height爲.preview img爲90%和width到auto。但auto並不意味着「匹配其他大小參數」。 W3C explains auto的含義是「寬度取決於其他屬性的值。」

The standard gives this explanation（相關部分粗體）：

10.3.2串聯，替換元素

'自動' 的關於 '利潤率左' 或 '保證金右' A計算值變爲一個使用的值爲'0'。

如果「高度」和「寬度」都已經計算「自動」和元件的值也具有固有的寬度，則該固有寬度爲「寬度」的使用的值。

如果'高度'和'寬度'的計算值都是'自動'，並且元素沒有固有寬度，但確實具有固有高度和內在比率;或者如果'寬度'的計算值爲'自動'，則 '高度'具有一些其他計算值，並且元素確實具有固有比率;然後「寬度」的使用值是：

（使用高度）*（本徵比）

如果「高度」和「寬度」都已經計算的「自動」值和元件的特性比率，但沒有固有的高度或寬度，那麼'寬度'的使用值在CSS 2.1中是未定義的。然而，建議，如果包含塊的寬度本身並不取決於替換元素的寬度，則使用的值'寬度'爲，其由塊級別的約束方程計算，未替換的元素正常流動。

否則，如果「寬度」具有「自動」的計算值，和元件具有固有寬度，則該固有寬度是「寬度」的使用的值。

否則，如果「寬度」具有「自動」的計算值，但沒有上述條件都滿足，則「寬度」的使用值變爲300像素。如果300px太寬而不適合該設備，則UA應使用具有2：1比例的最大矩形的寬度，而不是適合設備。

來源

2014-01-29 16:59:27

刪除'width：auto'不能解決問題，所以我不認爲這是問題所在。除非你有注意到的其他東西。 –

@MatthewGreen在這種情況下，問題是'width'仍然具有'auto'的計算值，所以，即使未指定，問題仍然存在。只定義「width」和「height」中的一個，或者使用不同的單位（'％'vs.'px'）來定義它們會導致同樣的問題。 –

而且這是有道理的。奇怪的是，即使寬度是自動的，它在一定程度上可以放大甚至縮小。但是有一個奇怪的邊緣情況，因爲當窗口從全高度縮小時，寬度沒有被重新計算。 –

由於這個Chrome瀏覽器問題困擾了好幾次，我學會了製作一個圖像特定的.css標籤。它可能不滿足規格，但它適用於所有瀏覽器。至少它盡我所能確定。

例如，今晚我將222x1048像素的圖像嵌入到文本塊中。我決定需要更高的圖像，因此我重新設計了222x1744像素的圖形並對html進行了適當的更改。但是，Chrome不會接受新的高度值，並將圖像截斷爲222x1048。（正如有人寫道，壓扁它）順便說一句，沖刷Chrome緩存沒有影響。

原始代碼閱讀：

.rghtimgd 
{ 
    text-align: right; 
    float: right; 
    margin: 11px 0 0 22px; 
    clear: left; 
}

新的代碼，原先爲：

.rghtimgdxt 
{ 
    text-align: right; 
    float: right; 
    margin: 11px 0 0 22px; 
    clear: left; 
    height: 1744px; 
    width: 222px; 
}

這是乏味的，我想，但現在的圖像呈現正常。這種跨瀏覽器的不一致導致我分心，但我拒絕受代碼問題的阻礙。

來源

2014-07-09 04:35:29 user3818831

寬度：自動啓動圖片目前在Chrome中仍然有問題。

我填一個bug報告在這裏：

https://code.google.com/p/chromium/issues/detail?id=503000

來源

2015-12-10 14:53:32 metatron

Chrome Squishing <img>關於瀏覽器高度調整

回答

相關問題