Question

我有一个带有display:table; max-width: 800px div的标题。它应该作为一个框架来限制内容的宽度。框架内部是自动缩放的图像，并嵌套在具有display:table-cell的div中。

所有内容都适用于Chrome和Mobile Safari，但Firefox和IE并未限制帧宽。

请有人帮助我;（

Answer 1

将表格设置为table-layout: fixed，宽度为100％。

＆＃13;

.frame {
  display: table;
  max-width: 800px;
  width: 100%;
  height: 300px;
  margin: 0 auto;
  padding: 10px;
  background: #ccc;
  table-layout: fixed
}
.item {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
img {
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="frame">
  <div class="item">
    <img src="http://lorempixel.com/250/250" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/250/200" />
  </div>
  <div class="item">
    <img src="http://lorempixel.com/250/100" />
  </div>
</div>

＆＃13;

Answer 2

Check this Fiddle

将最大宽度替换为图像css的宽度，其背后的原因是max-width不适用于内联元素，因此您将在浏览器中获得不一致的行为。

img {
    width: 100%;
    height: auto;
}

带有显示的DIV上的最大宽度：表格

2 个答案: