Question

我需要垂直对齐水平布局内的图像和流体高度（100％）。到目前为止，我发现最合适的垂直居中而没有固定高度的方法是使用display：table，table-row和table-cell。使用以下代码，到目前为止中心工作：

<div class="itemwrap">
  <div class="imagecenterrow">
  <div class="imagecentercell">
    <img src="..." title="...">
  </div>
  </div>
</div>

与

.itemwrap {
  display: table;
  height: 100%;
}
.imagecenterrow {
  display: table-row;
}
.imagecentercell {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
.imagecentercell img {
  max-height: 100%;
  max-width: 100%;
}

图像似乎忽略了表格单元格DIV的高度，并且都以原始大小显示（超过父元素的100％高度）。垂直切割虽然有效。关于将图像限制在表格单元边界的任何想法？（不得裁剪它们）

谢谢！

Answer 1

别忘了，max-height和max-width仅适用于height和width相同元素上定义的值的关系，您目前尚未设置这些值。您需要定义这些以使其正常工作，删除max-部分应该适合您。

Demo Fiddle

More on max-height from MDN

max-height CSS属性用于设置a的最大高度给定的元素。它会阻止 height 属性的使用值变得大于为max-height指定的值。

Answer 2

将图像的最大高度设置为小于表格高度

的值

.itemwrap img {
max-height: 5px;
}

只需编辑5px

您甚至可以使用填充

添加内部空间

.imagecentercell img {
padding: 10px!important;
}

DIV内的图像（显示：table-cell;）超出高度

2 个答案:

Demo Fiddle