我们如何在没有失真的情况下拥有完美的正方形图像

Question

有一个场景，我需要以完美的平方形状显示配置文件图像。目前，无法控制代码，但是可以通过CSS控制应用程序。无论如何，是否可以使用CSS直接在IMG元素上执行此操作，而不会扭曲或拉伸图像？由于源限制，放置IMG内部选项是不可行的。

Answer 1

您可以在CSS中使用object-fit。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

<img src="http://kenwheeler.github.io/slick/img/fonz1.png">