CSS如何固定
图片为正方形？这是
一个常见的问题，尤其是在设计响应式网页时，需要保证
图片不失真，可以用CSS来
解决这个问题。
首先，以
一个图片为例：
```
```
为了让这个
图片成为正方形，我们可以通过CSS来控制它的宽度和高度相同：
```
img {
width: 200px; /* 假设宽高都为200px */
height: 200px;
}
```
但是这样做会导致
图片被拉伸或压缩变形，因为它不一定是真正的正方形。我们可以通过"object-fit"
属性来
解决这个问题：
```
img {
width: 200px;
height: 200px;
object-fit: cover;
}
```
"object-fit"
属性可以控制
图片在容器内的表现方式，"cover"表示让
图片尽可能填满容器，并保留
图片的纵横比例，不会失真。我们也可以将宽度和高度设置为百分比，以适应不同尺寸的容器：
```
img {
width: 50%;
height: 50%;
object-fit: cover;
}
```
最后，我们还可以使用
一个伪元素来保持
图片的正方形，这种
方法对于需要自适应大小的
图片非常有用：
```
div {
width: 50%; /* 假设容器宽度为50% */
position: relative;
}
div::before {
content: "";
display: block;
padding-top: 100%; /* 假设面积为容器的100% */
}
div img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
```
以上
代码会在
一个DIV容器内创建
一个伪元素（
一个没有实际
内容的元素），并通过padding-top
属性将其纵向尺寸撑满，同时将
图片的宽度和高度设置为100%并使用"object-fit"保持
图片的正方形形状。
在开发响应式网页时，我们经常需要使用
图片，并且需要确保它们的比例正确，不失真。CSS提供了多种
方法来满足这个需求，但以上
方法可能是我们使用最多的
方法之一。
