imágenes Responsive en una mesa de líquido de ancho (ancho máximo)

Question

Considere el siguiente fragmento de código:

HTML:

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

CSS:

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

El la imagen nunca será más ancha que 200px, independientemente de su tamaño original. Hasta aquí todo bien.

Aquí está el violín: http://jsfiddle.net/PeAAb/

---

Sin embargo, si el elemento de matriz tenga su display conjunto de table:

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

la imagen se expande mágicamente a su anchura nativa, la ampliación de la table con ella .

Aquí está el violín: http://jsfiddle.net/PeAAb/1/

---

mismo ocurre con una tabla real: http://jsfiddle.net/PeAAb/2/

---

Pregunta: ¿Es esta comportamiento esperado? Si es así, ¿qué se puede hacer para evitar este problema?

Al establecer width del elemento principal (incluso un ancho basado en porcentaje) en lugar de max-width se comprime correctamente la imagen en su cuadro, pero no es una solución. Necesito que el padre sea fluido (estoy usando esto para la estructura principal del sitio, de modo que pueda tener the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width).

Además, setting table-layout to fixed parece tener no effect aquí.

Answer 1

El problema aquí es que una tabla (o un conjunto div para comportarse como una tabla) no es un elemento de bloque, y el ancho máximo solo se aplica a elementos de bloque. Mi única sugerencia es envolver el elemento de la tabla en un div con pantalla: bloque; conjunto.

Aquí está el violín en caso de que esté interesado: http://jsfiddle.net/PeAAb/4/

Answer 2

Sé que esto es bastante tarde, pero encontré la respuesta, que resultó ser bastante simple y muy fácil, table-layout: fijo.

encontrar aquí: http://blog.room34.com/archives/5042

De todos modos, esto es para aquellos que buscan una respuesta a este enigma como yo.