css如何保证图片正方形

CSS是前端开发中不可或缺的一环，它可以帮助我们在页面上实现各种效果，其中一个经常遇到的问题就是如何保证图片正方形。

常见的一种方法是设定固定宽高，比如我们可以这样写：

img {
  width: 200px;
  height: 200px;
}

这样可以确保图片大小固定，但是无法解决图片本身不是正方形的问题。

为了让图片正常显示并保持正方形，我们可以使用以下方法：

.image {
  position: relative;
}
.image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.image:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.image img,.image:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

使用这个方法可以确保图片可以自适应大小，并且可以保持正方形。我们在HTML中添加一个容器，可以使得其可以将图片包裹在内并且添加其他样式。

最后，我们可以在HTML中使用如下代码：

这样就可以保证我们的图片始终保持正方形了。