可滚动显示：表格单元格 - 无法具有固定尺寸答案

【问题标题】：scrollable display:table-cell - not able to have fixed dimensions可滚动显示：表格单元格 - 无法具有固定尺寸
【发布时间】：2017-09-04 01:11:41
【问题描述】：

我正在使用 display:table,table-row,table-cell 应用于某些 div 的样式。其中一个表格单元格中有一个巨大的图像。我想为单元格设置一个固定的宽度和高度，并使其可滚动，以便您可以在图像中移动。

问题在于使用overflow:scroll，甚至overflow:hidden，具有固定的宽度和高度似乎不会强制表格单元格的大小。

如何强制包含图像的 div 为固定高度/宽度？

    .table-wrap{
      display:table;
    }
    .table-wrap > div{
      display:table-row;
    }
    .table-wrap > div > div{
      display:table-cell;
    }
    #map{
      width:100px;
      height:100px;
      overflow:scroll;
    }

<div id="interface">
  <div class="table-wrap">
    <div id="top">
      <div id="map">
        <img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
      </div>
      <div id="sidebar">
        sidebar
      </div>
    </div>
  </div>
  <div class="table-wrap">
    <div id="bottom">
      <div class="bla">
        bla
      </div>
      <div class="bla">
        bla
      </div>
      <div class="bla">
        bla
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您只能为图像固定一个维度 - 否则图像将“拉伸”并且不会保留纵横比...
我没有调整图像大小。我正在调整容器的大小。我希望大部分图像被包含的 div 隐藏。

标签： html css image css-position css-tables

【解决方案1】：

由于 CSS 使用了 table algorithm，您将无法将图像限制在 table-cell 内，除非您直接在 img 元素上提供它。

我认为你最好的选择是使用 position 和 img 作为 absolute 并让它看起来像你想要的那样。

以下片段：

.table-wrap {
  display: table;
  width: 100%;
}
.table-wrap > div {
  display: table-row;
}
.table-wrap > div > div {
  display: table-cell;
  border: 1px solid;
}
#map {
  width: 100px;
  height: 100px;
  overflow: auto;
  position: relative;
}
#map img {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="interface">
  <div class="table-wrap">
    <div id="top">
      <div id="map">
        <img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
      </div>
      <div id="sidebar">
        sidebar
      </div>
    </div>
  </div>
  <div class="table-wrap">
    <div id="bottom">
      <div class="bla">
        bla
      </div>
      <div class="bla">
        bla
      </div>
      <div class="bla">
        bla
      </div>
    </div>
  </div>
</div>

【讨论】：