Question

编辑：考虑一下我们想要显示一张飞机图像的行表，下面我们想要显示一张汽车图像的行表。我们希望每个图像的高度与表格相匹配，然后我们让用户随意滚动以查看最初未显示的图像。的最终修改

因为在CSS文件中tables被赋予height: 100%;，所以我希望图像的高度始终与它们所处的div的高度相匹配。这是有效的，只要他们所处的div的高度并不比他们小。换句话说，图像很高兴被放大，但它们拒绝减小尺寸。

为什么height: 100%;没有做我认为应该做的事情？
我怎样才能让图像调整高度到他们所在的桌子，并将每张桌子调整到它所在的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被视为最小高度：

表格的高度由“高度”属性给出 'table'或'inline-table'元素。值'auto'表示 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>

Answer 2

如果我做对了，你想让图像适合div;您需要为max-width:100%

设置img

Check updated fiddle

td img{
  max-width:100%;
  }

Answer 3

1。）您的100％适用于表格而不是表格单元格（td元素），但您的图像位于表格单元格内。

2。）关于高度：总是存在比例高度与宽度的问题。但是尝试添加

td img{
  height:100%;
  width: auto;
  text-align: center;
}

这应该使每个图像成为其所在的表格单元的全高，并且如果单元格和图像比例恰好处于图像现在变得比单元格宽的关系中，则图像居中。（如果单元格没有设置宽度，则可能不会发生这种情况 - 总是取决于实际情况）

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

3 个答案: