Question

我有以下HTML：

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

我希望图像是容器div的90％，并且它在chrome中工作。但是在firefox中，max-width属性在这里不起作用。相反，我必须使用像90px这样的东西来使它工作。

我该如何解决这个问题？

Answer 1

灵感：This answer

你需要做的是把你的包装div（带有display：table-cell的那个）放在另一个具有display：table和table-layout：fixed的div中。这使得Firefox和Opera都遵循最大宽度规则。

<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

Answer 2

试试这个

<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>

表格单元格显示容器内的最大宽度百分比

2 个答案: