css - 使图像和表格的高度与div的高度匹配

Question

编辑:假设我们想要显示飞机图像的行表，而在其下方我们想要显示汽车图像的行表。我们希望每个图像的高度与表格和它所在的 div 相匹配，但我们让用户随意滚动以查看最初不可见的图像。 结束-编辑

因为在 CSS 文件 tables 中指定了 height: 100%;，我希望图像的高度始终与它们所在的 div 的高度相匹配in. 这有效，只要它们所在的 div 的高度不小于它们的高度。换句话说，图像乐于放大，但拒绝缩小。

https://jsfiddle.net/usojgd3u/

1. 为什么 height: 100%; 没有按照我认为应该的方式执行？
2. 如何让图像根据所在的表格调整高度，并根据所在的 div 调整每个表格。

HTML

<div class="top scrolling">
    <table><tr>
            <td><img src="https://openclipart.org/image/800px/svg_to_png/16692/Jarno-Single-engine-Cessna.png" /></td>
            <td><img src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" /></td>
    </tr></table>
</div>
<div class="bottom scrolling">
    <table><tr>
            <td><img src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" /></td>
            <td><img src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png" /></td>
    </tr></table>
</div>

CSS

div {
    box-sizing: border-box;
}
table {
    border: 5px solid gray;
    margin: 0 auto;
    height: 100%;
}
td {
    border: 5px dashed green;
}
.scrolling {
    position: absolute;
    height: 50%;
    overflow: scroll;
    width: 100%;
}
.top {
    top: 0;
    border: 4px dashed red;
}
.bottom {
    bottom: 0;
    border: 4px dashed blue;
}

Answer 1

那是因为 height of a table被视为最小高度:

The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value is treated as a minimum height.

为了防止图像对单元格的大小产生影响，您应该将图像从流中取出:

table {
  width: 100%;
}
td {
  position: relative;
}
img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

div {
  box-sizing: border-box;
}
table {
  border: 5px solid gray;
  margin: 0 auto;
  height: 100%;
}
td {
  border: 5px dashed green;
}
.scrolling {
  position: absolute;
  height: 50%;
  overflow: scroll;
  width: 100%;
}
.top {
  top: 0;
  border: 4px dashed red;
}
.bottom {
  bottom: 0;
  border: 4px dashed blue;
}
table {
  width: 100%;
}
td {
  position: relative;
}
img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

<div class="top scrolling">
  <table><tr>
    <td><img src="https://openclipart.org/image/800px/svg_to_png/16692/Jarno-Single-engine-Cessna.png" /></td>
    <td><img src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" /></td>
  </tr></table>
</div>
<div class="bottom scrolling">
  <table><tr>
    <td><img src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" /></td>
    <td><img src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png" /></td>
  </tr></table>
</div>

但是如果你不想水平限制你的图像，并且不需要表格，你可以使用

.scrolling {
  white-space: nowrap; /* Prevents line breaks */
  overflow-x: scroll; /* Horizontal scrollbar */
}
.scrolling > img {
  max-height: 100%; /* Shrink if too tall */
  vertical-align: middle; /* Prevents space below the image */
}

.scrolling {
  position: absolute;
  height: 50%;
  white-space: nowrap;
  overflow-x: scroll;
  box-sizing: border-box;
  border: 4px dashed;
  left: 0;
  right: 0;
}
.top {
  top: 0;
  border-color: red;
}
.bottom {
  bottom: 0;
  border-color: blue;
}
.scrolling > img {
  max-height: 100%;
  vertical-align: middle;
}

<div class="top scrolling">
  <img src="https://openclipart.org/image/800px/svg_to_png/16692/Jarno-Single-engine-Cessna.png" />
  <img src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
</div>
<div class="bottom scrolling">
  <img src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
  <img src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png" />
</div>