我如何使用React Js处理不同大小的比例上传图像？

Question

所以我一直在互联网上搜索，试图找到最佳方法来上传不同大小（宽度和高度）的图像，但仍然能够在图库类型的事物中正确显示它们。

我的意思是做一个例子，是facebook画廊，即使所有图片的大小不同（所有图片看上去都没有拉长，也没有拉伸），所有图片都对齐良好。

我知道这样的图像处理以前已经实现，因为许多站点都处理图像，但是我似乎在开放的互联网上找不到任何合适的解决方案。任何帮助表示赞赏。谢谢

Answer 1

您可以仅将CSS添加到您的React组件中。

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

Answer 2

使用CSS属性background-image很容易完成。只需不要将图像放入img标签，而是使用具有以下样式的简单元素（例如div）：

{
  width: 100px;
  height: 100px;
  background-image: url(http://your-image-url.com);
  background-size: cover;
}