在方形網格中顯示圖像（React + Material UI Grid）

Question

我使用 React + [Material UI Grid][1]來顯示我的圖像，圖像大小不同，我想：

1. 保持圖像比例
2. 使圖像適合父容器正方形（換句話說，一行中的所有圖像具有相同的高度）

問題是，Grid 中的列數是變化的，有時是 3 列（在移動設備上），有時是 6 列（在 PC 上），React 會動態計算圖像的寬度。 我不知道運行時圖像寬度，所以我不能在我的 css 樣式中設置圖像高度。 任何想法？ 謝謝。

目前可以看到如下效果，一個非常高的圖片讓網格垂直拉伸，非常難看。

Answer 1

使用此代碼。 它將圖像在Grid內居中，不會讓它溢出，同時也不會以像素為單位提供暗淡。 雖然尺寸固定為正方形（axa），但可以更改。

我過去有同樣的問題，所以我分享了我自己的代碼。 希望這會很有用，因為我使用CardMedia和組件類型img 。 如果檢查不完整，您可以 select 相關CSS 。