如何以与Google图片类似的方式在页面上展开图片

Question

无论图像尺寸或屏幕尺寸如何，goolge图像中显示的图像均正好位于页面的右侧。我想也许有可能添加某种动态填充以使图像完全适合div？如果有人对如何做到这一点有任何建议，将不胜感激！

Answer 1

• 定义每行的高度以及所需的最小和最大宽度。
• 如果将图像缩放到给定高度，则计算图像的宽度。
  • 如果计算出的宽度介于最小和最大宽度之间，请将其缩放到此大小。
  • 如果宽度较小，请缩放图像以使其具有最小宽度，然后裁剪它以使其具有适当的高度。
  • 如果宽度大于最大值，则按此方式缩放并裁剪，因此宽度正确。

为了使所有图像完美地适合行，您可能需要调整最小和最大宽度。特别是需要裁剪的图像可以用来调整行的长度。

您可以使用CSS（＆amp; JavaScript）或在服务器端执行此操作。如果您的页面宽度是动态的，那么您必须依赖CSS / JavaScript。