如何在保持纵横比的同时填充表格单元格？

我想要做的是用随机大小的图像填充表单元格，但我希望单元格保持200px的高度，必须自动调整宽度以填充整个表格宽度，即td{width: 100%; height: 200px;}。图像应该适合细胞内的方式填充整个细胞而不会变形，如果需要可以剪切。如何在保持纵横比的同时填充表格单元格？

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

任何帮助表示赞赏。

来源

2016-04-26 Alexandre Krabbe

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

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

CSS：

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

的jsfiddle：https://jsfiddle.net/1myu255g/ 请原谅我没有使用所有图像，但我相信你得到了点:)。

来源

2016-04-26 21:58:40

如何在保持纵横比的同时填充表格单元格？

回答

相关问题