CSS 图片的高度与宽度相同

在本文中，我们将介绍CSS中如何设置图片的高度与宽度相同的方法。通过这种方式，可以实现图片在任何宽高比的情况下都能保持正方形的效果。

阅读更多：CSS 教程

使用padding技巧实现

第一种方法是使用padding技巧来实现图片的高度与宽度相同。我们可以将padding-top或padding-bottom属性设置为一个百分比值，该值等于宽度的百分之百。这样，图片就能根据宽度来自动调整高度。

.square-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.square-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在上面的示例中，我们创建了一个容器的类名为.square-image。通过将padding-top设置为100%，容器的高度就会自动根据宽度调整并保持相同值。接下来，我们使用绝对定位，将图片放置在容器内部的左上角。同时，使用object-fit属性将图片以cover的方式填充整个容器，保证图片不会变形。

使用伪元素实现

第二种方法是使用伪元素来实现图片的高度与宽度相同。通过伪元素的padding-top属性设置为100%，我们可以确保伪元素的高度和宽度相等，然后利用background属性来显示图片。

.square-image::before {
  content: "";
  display: block;
  padding-top: 100%;
  background-image: url("example.jpg");
  background-size: cover;
  background-position: center;
}

在上面的示例中，我们创建了一个伪元素::before，并将其content属性设置为空。通过display:block和padding-top:100%，伪元素的宽度和高度将保持相同，且为容器的100%。然后，我们使用background-image属性来设置图片的URL，通过background-size:cover来让图片在伪元素中等比例显示，并且通过background-position:center来使图片居中显示。

使用flexbox实现

第三种方法是使用CSS的flexbox布局来实现图片的高度与宽度相同。我们可以将图片放置在一个flex容器中，并将容器的flex属性设置为1，使其自动占满可用的空间。然后，通过设置容器内图片的宽度为100%来实现图片的高度与宽度相同。

.square-image-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.square-image-container img {
  width: 100%;
}

在上面的示例中，我们创建了一个容器的类名为.square-image-container，并使用display:flex来定义一个flex容器。通过flex-direction:column，我们将容器内的元素以垂直方向排列。然后，将容器的flex属性设置为1，使其自动占满可用的空间。最后，通过将图片的宽度设置为100%，来实现图片的高度与宽度相同。