Firefox - 當圖像縮小時，容器不適應寬度內容

我在Firefox上有一個奇怪的問題，它聽起來像這樣：https://bugzilla.mozilla.org/show_bug.cgi?id=829958但它已在幾年前修復。Firefox - 當圖像縮小時，容器不適應寬度內容

我有一個大的圖像裏面有width: auto; height: 100%;的包裝。應用於圖像的唯一約束是height: 100%;。

圖像在所有瀏覽器上正確縮小到可用的最大高度。在幾乎所有瀏覽器上，包裝也縮小到圖像的新（有效）大小。這不是Firefox上的行爲（在50+以上測試過），Firefox確實縮小了圖像的大小，但不是保持原始圖像寬度的包裝器。

這裏是一個codepen更好地模擬問題：https://codepen.io/Tronix117/pen/MEogMv

的img-wrapper不能在display: inline;，因爲應用在它的影響。如果需要，可以添加更多中間div。

在codepen上，不要介意scroll-wrapper的固定寬度，它是一個動態值，以及所有轉換值。

圖片可以有不同的寬度和高度，CSS應該有反應。

這個想法是使用Swiper lib產生具有不同圖像的覆蓋流。

我一直在努力，所以感謝您的幫助！

CSS

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

* { 
    padding: 0; 
    margin: 0; 
} 

#viewport { 
    position: absolute; 
    top: 20px; 
    bottom: 20px; 
    left: 20px; 
    right: 20px; 
    overflow: hidden; 
    display: block; 
    perspective: 1200px; 
    transform-style: preserve-3d; 
} 

#scroll-wrapper { 
    display: block; 
    position: relative; 
    width: 3000px; 
    height: 100%; 
    transform-style: preserve-3d; 
    transform: translate3d(-500px, 0, 0); 
} 

.img-wrapper { 
    display: inline-block; 
    white-space: nowrap; 
    overflow: hidden; 
    width: auto; 
    height: 100%; 
    position: relative; 
    transform-style: preserve-3d; 
    border: 4px solid red; 
} 

img { 
    height: 100%; 
} 

#img-wrapper-1 { 
    border-color: blue; 
    transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(30deg); 
    z-index: -1; 
} 

#img-wrapper-3 { 
    border-color: green; 
    transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(-30deg); 
    z-index: -1; 
}

HTML

<html> 
    <body> 
    <div id="viewport"> 
     <div id="scroll-wrapper"> 
     <div id="img-wrapper-1" class="img-wrapper"> 
      <img src="http://via.placeholder.com/2000x1200" /> 
     </div> 
     <div id="img-wrapper-2" class="img-wrapper"> 
      <img src="http://via.placeholder.com/2000x1200" /> 
     </div> 
     <div id="img-wrapper-3" class="img-wrapper"> 
      <img src="http://via.placeholder.com/2000x1200" /> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2017-09-29 Tronix117

非常有趣的問題！

這很可能是Firefox的一個錯誤，儘管我認爲這可能是由於Firefox無法爲嵌套元素的所有級聯height: x%;找到正確的參考值height。

因此，我給#viewport明確height值：height: calc(100vh - 40px);而不是從top: 20px; bottom: 20px;隱含一個。它確實有效！

演示：https://codepen.io/anon/pen/eGRYqx

來源

2017-09-29 02:04:41 AVAVT

謝謝你，這個答案解決了這個具體問題，這樣很好。但是，當應用於更復雜的佈局時，如果我們不知道「40px」值，它將無法工作。讓我們想象一下在div限制它縮小之前和之後的一些文本，現在讓我們把我在上面使用的'viewport' div放在未知高度的div內。現在我們有一個動態高度的例子，它不能用'100vh - 40px'這種方式來解決。任何其他想法？ – Tronix117

你的例子對我來說聽起來不合適。 div之前和之後的文本不會縮小它們，它們會換行到下一行或在容器外流動。這是HTML文檔的本質，其中「首選寬度」是100％視口，「首選高度」未定義。他們接受並鼓勵垂直滾動。除非它是您所說的flexbox，否則我不認爲Firefox會有問題，因爲flexbox確實提供了有關它們高度的內部元素信息。 – AVAVT

這是我在談論的flexbox佈局（我現在在移動設備上很難做出例子）。我找出了一個解決方案，通過刪除彈性佈局，並給出文本以及固定寬度以上的文本。如果你有興趣，我會盡快回到另一個例子。 – Tronix117

Firefox - 當圖像縮小時，容器不適應寬度內容

回答

相關問題