Max width in percentage inside table-cell display container

Question

I have the following HTML:

<div style="display: table-cell; width: 500px;">
  <img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_k4PiHxO.jpg" style="max-width: 90%">
</div>

I want the image to be 90% of the container div, and it works in chrome. But in firefox the max-width property doesnt work here. Instead I have to use something like 90px to make it work.

How do I solve this?

Can you use inline-block instead of table-cell? If yes, that would be a quick fix — Michael Eugene Yuen, Apr 21 '16 at 09:10

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Inspiration : This answer

What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule.

<div style="display: table; table-layout: fixed;  width: 500px;">
  <div style="display: table-cell;">
    <img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_k4PiHxO.jpg" style="max-width: 90%">
  </div>
</div>

Fiddle

score 0 · Answer 2 · answered Apr 21 '16 at 09:08

Try this

<div style="display: table; width: 500px; table-layout:fixed">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      <img src="http://dummyimage.com/3000x760/adadad/fff.jpg" style="max-width: 90%">
    </div>
  </div>
</div>

Max width in percentage inside table-cell display container

2 Answers2