css 图片 正方形 中间

在网页设计中，图片是非常必要的元素之一。而在CSS中，图片的正方形展示是一个经常被使用的效果。具体实现方法如下：

/*首先我们需要一个正方形的容器*/
.square{
  width: 200px;
  height: 200px;
}

/*然后我们在容器内添加图片*/
.square img{
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

/*最后我们对图片进行裁剪*/
.square img{
  object-fit: cover;
  object-position: center;
}

首先定义一个正方形容器，其中宽度和高度相等。然后在容器内部添加图片元素，使用max-width和max-height属性将其放缩为该容器的大小。接着设置图片元素的display为block，使其居中显示，margin为0 auto来实现水平居中。最后通过object-fit和object-position属性来裁剪图片，使其填充整个容器且居中展示。