immagini Responsive in una tabella fluid-width (max-width)

Question

Si consideri il seguente frammento di codice:

HTML:

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

CSS:

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

Il l'immagine non sarà mai più larga di 200 px, indipendentemente dalla sua dimensione nativa. Fin qui tutto bene.

Ecco il violino: http://jsfiddle.net/PeAAb/

---

Tuttavia, se l'elemento genitore ha la sua display insieme a table:

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

l'immagine si espande magicamente alla sua larghezza originaria, ampliando il table con esso .

Ecco il violino: http://jsfiddle.net/PeAAb/1/

---

stesso accade con una tabella effettiva: http://jsfiddle.net/PeAAb/2/

---

Domanda: È questo il comportamento previsto? In tal caso, cosa si può fare per ovviare a questo problema?

L'impostazione dello width del genitore (anche una larghezza basata su percentuale) anziché max-width ricomprime correttamente l'immagine nella sua casella, ma non è una soluzione. Ho bisogno che il genitore sia fluido (lo sto usando per la struttura principale del sito, così posso avere the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width).

Inoltre, setting table-layout to fixed sembra avere no effect qui.

Answer 1

Il problema qui è che una tabella (o una serie di div di comportarsi come una tabella) non è un elemento di blocco e la larghezza massima si applica solo agli elementi di blocco. Il mio unico suggerimento è di avvolgere l'elemento tabella in un div con display: block; impostato.

Ecco il violino nel caso in cui si è interessati: http://jsfiddle.net/PeAAb/4/

Answer 2

So che questo è piuttosto tardi, ma ha trovato la risposta, che si è rivelato essere piuttosto semplice e super facile, table-layout: fisso.

trovate qui: http://blog.room34.com/archives/5042

In ogni caso, questo è per coloro che cercano una risposta a questo enigma come lo ero io.