如何在保持縱橫比的同時填充表格單元格？

我想要做的是用隨機大小的圖像填充表單元格，但我希望單元格保持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

如何在保持縱橫比的同時填充表格單元格？

回答

相關問題