如何在保持纵横比的同时使图像填充表格单元格？答案

【问题标题】：How to make images fill table cells while keeping aspect ratio?如何在保持纵横比的同时使图像填充表格单元格？
【发布时间】：2016-08-20 22:56:33
【问题描述】：

我正在尝试用随机大小的图像填充表格单元格，但我希望单元格保持 200px 的高度，必须自动调整宽度以填充整个表格宽度，即td{width: 100%; height: 200px;}。并且图像应该以填充整个单元格而不失真的方式适合单元格内部，如果需要，可以裁剪它们。

我在论坛上寻找解决方案，发现我应该将表格单元格的大小设置为我想要的任何尺寸，然后将其中的图像设置为img{with: 100%; height: auto;} 这对我来说很有意义，但不幸的是它没有不行。我把一个 JSFiddle 放在一起来展示发生了什么：JSFiddle

感谢任何帮助。

【问题讨论】：

如果您希望使用您的方法填充表格单元格，则必须强制单元格与图像具有相同的纵横比：这非常困难，因为 HTML 表格单元格的尺寸是根据调整的关于内容。最好的办法是分配一个大小设置为cover 的背景图像。但这不适用于您的用例，因为您正在显示不同纵横比的图像网格：您唯一的解决方案可能是基于 JS 的解决方案。

【解决方案1】：

要么强制表格单元格与图像具有相同的比例 (@Terry)，要么将图像用作单元格的背景。

CSS：

td {
    background-image: url('path-to-image');
    background-size: cover;
    background-position: center;
}

JSFiddle：https://jsfiddle.net/1myu255g/ 请原谅我没有使用所有图片，但我相信你明白了:)。

【讨论】：