Css 使图像和表格的高度与div的高度相匹配 编辑：< /强>考虑我们想显示一排飞机图像的表格，下面我们想展示一排汽车图像表。我们希望每个图像的高度与它所在的表和div相匹配，但我们允许用户随意横向滚动以查看最初不可见的图像结束编辑

因为在CSS文件

表格
中给出了
高度：100%，我希望图像的高度始终与它们所在的div相匹配。这是可行的，只要他们所在的div的高度不小于实际高度。换句话说，图像很高兴被放大，但它们拒绝缩小尺寸



为什么
高度：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>

这是因为被视为最小高度：

表的高度由表的“height”属性给出
“table”或“inline table”元素。值“auto”表示
高度是行高度加上任何单元格间距或边框的总和。
任何其他值都被视为最小高度

要防止图像对单元格大小产生影响，应将图像从流中取出：

表格{
宽度：100%；
}
运输署{
位置：相对位置；
}
img{
位置：绝对位置；
最大高度：100%；
最大宽度：100%；
顶部：0；右侧：0；底部：0；左侧：0；
保证金：自动；
}


div{
框大小：边框框；
}
桌子{
边框：5px纯灰；
保证金：0自动；
身高：100%；
}
运输署{
边框：5px绿色虚线；
}
.滚动{
位置：绝对位置；
身高：50%；
溢出：滚动；
宽度：100%；
}
.顶{
排名：0；
边框：4px红色虚线；
}
.底部{
底部：0；
边框：4px蓝色虚线；
}
桌子{
宽度：100%；
}
运输署{
位置：相对位置；
}
img{
位置：绝对位置；
最大高度：100%；
最大宽度：100%；
顶部：0；右侧：0；底部：0；左侧：0；
保证金：自动；
}
如果我做对了，你想让图像适合div；您需要为
img


1.）您的100%应用于表格，而不是表格单元格（
td
elements），但您的图像位于表格单元格内

2.）关于高度：始终存在高度与宽度的比例问题。但是试着加上

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

这将使每个图像达到其所在表格单元格的完整高度，如果单元格和图像的比例恰好处于一种关系中，此时图像比单元格宽，则图像居中。（尽管没有为单元格设置宽度，但这可能不会发生-始终取决于实际情况）
您的解决方案确实很酷，但它不是我想要的。对不起，我说的模棱两可。我现在编辑了这个问题以澄清。@Calaf您的意思是图像不应该因水平约束而收缩吗？这是有问题的，因为你不能让图像脱离流动，这样它们就能让细胞生长。我认为不可能确保它与表一起工作，因为有很多实现定义的东西。但为什么要使用表呢？如果表有问题，我很乐意使用div或任何其他机制。我尝试使用一个只有
float:left
的图像容器div，但效果并不好。欢迎您的建议@Calaf不需要在包装中放置图像。
td img{
  max-width:100%;
  }

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