如何以與Google圖像類似的方式在頁面上放置圖像

Question

無論圖像尺寸或屏幕大小如何，在goolge圖像中顯示的圖像都正好位於頁面的右側。我在想，也許可以添加一些動態填充以使圖像正好適合div？如果任何人有任何建議如何做到這一點，將不勝感激！

Answer 1

• 定義每行的高度以及所需的最小和最大寬度。
• 如果將圖像縮放到給定高度，計算圖像的寬度。
  • 如果計算的寬度位於最小和最大寬度之間，則將其縮放到此大小。
  • 如果寬度較小，則縮放圖像使其具有最小寬度，然後剪裁圖像以使其具有適當的高度。
  • 如果寬度大於最大值，則按此方式對其進行縮放並對其進行裁剪，使其具有合適的寬度。

爲了讓所有的圖片，完美契合行，你可能需要調整的最小和最大寬度。特別是無論如何需要裁剪的圖像都可以用來調整行的長度。

您可以使用CSS（& JavaScript）或通過在服務器端執行此操作來實現此目的。如果你的頁面寬度是動態的，你必須依靠CSS/JavaScript。