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

Question

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

我在论坛上寻找解决方案，发现我应该将表格单元格的大小设置为我想要的任何尺寸，然后将其中的图像设置为td{width: 100%; height: 200px;}这对我来说很有意义但不幸的是它没有用。我把JSFiddle放在一起，以显示正在发生的事情：JSFiddle

感谢任何帮助。

Answer 1

强制表格单元格与图像（@Terry）具有相同的比例，或者将图像用作单元格的背景。

CSS：

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

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