響應圖像（最大寬度）

HTML：

<div> 
    <img src="http://placehold.it/600x150" /> 
</div>

CSS：

div { max-width: 200px } 
img { max-width: 100% }

的無論其原生尺寸如何，圖像的寬度都不會超過200像素。到現在爲止還挺好。

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

但是，如果父元素都有display設置爲table：

div { max-width: 200px; display: table }

圖像奇蹟般地膨脹至其原生的寬度，它擴大了table 。

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

同樣的情況，與實際的表：http://jsfiddle.net/PeAAb/2/

問：這是預期的行爲？如果是這樣，可以做些什麼來解決這個問題？

設置父母的width（即使是基於百分比的寬度）而不是max-width正確地將圖像壓回到其框中，但不是解決方案。我需要父母是流動的（我使用這個網站的主要結構，所以我可以有the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width）。

另外，setting table-layout to fixed似乎有no effect在這裏。

來源

2012-08-08 Joseph Silber

我正在嘗試在SharePoint 2010中構建響應式應用程序，該應用程序具有圍繞事物環繞嵌套表的非常惡劣的習慣。如果你知道這個解決方案（可以回溯到IE8），我很樂意聽到它。 @ pKs的解決方案（顯示：塊;）在IE8/9在這裏失敗:( – 2013-02-06 18:04:36

這裏的問題是，一個表（或一個div設置爲像一個表一樣）不是一個塊元素，max-width僅適用於塊元素。我唯一的建議是將table元素封裝在帶有display：block的div中;組。

下面是如果你有興趣的小提琴：http://jsfiddle.net/PeAAb/4/

來源

2012-08-08 22:06:48

感謝您的*正確*答案，但在我的情況下，這並沒有幫助我看看[我的演示]（http：// jsfiddle.net/659JN/）它在webkit中正常工作，但在其他地方無法正常工作。包裹它裏面的另一個元素[沒有幫助]（http://jsfiddle.net/6BWCw/）。 – 2012-08-08 23:57:35

我勉強接受這個答案，因爲它是正確的。但是，它不能解決問題。 – 2012-11-09 18:25:24

約瑟夫，謝謝你的接受。我希望我能解決您的問題，因爲我通常不會發布「無法完成」的回覆 - 但是經過一些研究，結合我自己的個人經驗，我無法想出一個很好的解決你的問題。事實上，這讓我很困惑，我期待着聽到任何人能比我更好地解決這個問題。 – 2012-11-09 18:59:34

-1

我知道這是相當晚了，但找到了答案，這被證明是非常簡單，超級容易，表格的佈局：固定。

這裏找到：http://blog.room34.com/archives/5042

無論如何，這是爲那些尋找一個答案，這個難題，因爲我是。

來源

2014-01-04 01:09:32 manonatelier

我會簡單地解釋或解釋文章，爲什麼'table-layout：fixed'這裏是一個答案，特別是因爲OP說他不適合他。 – Dan 2014-01-04 01:37:44

這隻適用於指定的寬度。問題是如何用'max-width'來實現這個。父母必須是流體寬度。 – 2014-01-05 03:34:54

響應圖像（最大寬度）

回答

相關問題