設置嵌入式圖像的最大寬度打破了容器寬度

設置max-width旋轉木馬內圖像的樣式值打破了容器的寬度。即使最大寬度值不會影響圖像的實際寬度，也會發生這種情況。我無法弄清楚爲什麼會發生這種情況。設置嵌入式圖像的最大寬度打破了容器寬度

我創建了一個關於這個的jsfiddle因爲我無法解釋這個問題，否則：https://jsfiddle.net/atmp9ymr/1/

所以我基本上是問爲什麼出現這種情況？有沒有辦法來解決這個問題？任何幫助，將不勝感激。

編輯。我試圖在這裏解釋這個問題：

所以我有一個容器內嵌圖像。通過使用white-space: nowrap和圖像具有inline-block和顯示樣式，容器強制物品成爲內聯。如果重要的話，這個容器的位置設置爲絕對。目前一切都很好。容納圖像的容器具有正確的寬度（根據內部圖像）。現在，如果我爲圖像設置了max-width: 100%，容器寬度就會被打破。即使圖像大小不變，寬度也不再正確。我找不到這樣的邏輯。

請檢查jsfiddle以獲取更好的解釋。

來源

2016-10-13 Matti Mehtonen

是否加入overflow：隱藏到容器類中解決你的問題？ – Barry127

@ Barry_127感謝您的建議。這似乎沒有效果，不幸的是。 :( –

@ K.Daniek如果你檢查小提琴我認爲你會理解，對於缺乏說明的解釋感到抱歉，但我不知道如何用文字來解釋這個問題:(這是非常具體的問題 –

圖像的最大寬度與包含元素有關。

因此，圖像上的max-width：100％表示「使用」.item「的100％。.item不會被進一步限制，並且通過在#inner上使用position：absolute，您已將此元素設置爲100％視口）

嘗試增加「邊界：1px的固體紅」。到#inner和#container的看到，其中的元素繪製

只要沒有speciefied什麼有發生，德恩大小這種情況將會發生，

來源

2016-10-13 13:27:53 campino2k

我解開d。感謝您的解釋。但是，你能解釋爲什麼在將最大寬度設置爲100％時不會搞亂圖像嗎？我知道在這裏設置最大寬度爲100％並不是很有用，但如果您選中此項：https：//jsfiddle.net/atmp9ymr/4/，您將看到圖像似乎具有正確的大小。 –

我實際上認爲我能接受這個答案。將max-width設置爲100％在這裏沒有意義，我需要刪除它並重構我的代碼，所以我不必設置它。謝謝 –

Firefox，Opera和Chrome有一個解決方法。

#inner { 
    position: absolute; 
    top: 0; 
    display: flex; /* add display flex */ 
} 

.item { 
    display: block; 
    vertical-align: top; 
    width: -moz-max-content; /* this will stretch the items to maximum width */ 
    width: -webkit-max-content; /* this will stretch the items to maximum width */ 
    width: max-content; /* for future */ 
}

看看this jsfiddle。

來源

2016-10-13 14:27:14 Huelfe

對於我的具體情況，這將無法正常工作，因爲我必須支持IE11，但謝謝！這是非常好的！ –

這裏面臨的挑戰是將百分比寬度與推測（自動）寬度混合，並將其與絕對定位相結合。

max-width:100%表示瀏覽器必須將百分比值轉換爲絕對值。如果祖先擁有width:auto（順便說一下是默認值）並且絕對定位，這可能會產生意想不到的結果。

在這種情況下，百分比值沒有意義，並且100％還不如理解爲100％的元素本身的- 父/祖先不是100％。

如果你想在這裏使用百分比值，你應該確保祖先的寬度被清晰地設置（除了auto以外）。但是，這可能會阻止#inner包裝動態調整其寬度以包裹其所有.item子女。

在結束時，將容易/難看溶液可能是最好的：Set the max-width to an absolute value。（例如，像素寬度爲#container。）

PS：我創建了a variation of your case。也許你會發現它很有用。

來源

2016-10-14 14:11:51 paulflakstad

設置嵌入式圖像的最大寬度打破了容器寬度

回答

相關問題