HTML CSS 将未知长宽的图片以正方形显示（自适应）

要将未知宽高的图片以正方形的方式显示，可以使用CSS来设置图片的容器高度和宽度相同，并确保图片在容器内居中显示。以下是实现这一效果的CSS代码示例：

.square-container {
  width: 30%; /* 或者你想要的任何百分比或固定宽度 */
  height: 0; /* 使用padding-bottom替代height来保持正方形比例 */
  padding-bottom: 100%; /* 设置为容器宽度的100%，这样高度就会自动计算为宽度的100%，形成正方形 */
  position: relative; /* 用于定位图片 */
  overflow: hidden; /* 隐藏溢出的图片 */
}
 
.square-container img {
  width: 100%; /* 图片宽度设置为100% */
  height: auto; /* 图片高度自动，保持比例 */
  position: absolute; /* 图片定位为绝对位置 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
}

HTML结构如下：

<div class="square-container">
  <img src="path/to/your/image.jpg" alt="Description">
</div>

每个.square-container的高度将自动计算为其宽度的100%，确保内部的图片始终以正方形的形式展示。