仅用CSS实现响应式正方形div，边长等于父元素最短边

你可以通过两种纯CSS方案实现这个需求，无需JavaScript：

方案一：利用aspect-ratio（现代浏览器推荐） #

这是最简洁的方案，依赖CSS原生的aspect-ratio属性强制正方形，结合max-width和max-height限制尺寸不超过父元素的最短边：

/* 父元素示例样式，可根据实际需求调整 */
.parent {
  width: 80vw;
  height: 60vh;
  border: 1px solid #ccc;
}

.child {
  aspect-ratio: 1/1; /* 强制元素保持正方形比例 */
  max-width: 100%;   /* 宽度不超过父元素宽度 */
  max-height: 100%;  /* 高度不超过父元素高度 */
  background-color: #42b983;
  margin: auto;      /* 可选：让正方形在父元素中居中 */
}

原理：当父元素宽大于高时，max-height会优先生效，子元素高度被限制为父元素高度，aspect-ratio会自动将宽度调整为与高度一致；当父元素高大于宽时，max-width生效，子元素宽度被限制为父元素宽度，高度自动匹配宽度，最终始终得到边长等于父元素最短边的正方形。

方案二：padding百分比技巧（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器（如IE），可以利用CSS中padding-top百分比基于元素宽度计算的特性：

.parent {
  position: relative;
  width: 80vw;
  height: 60vh;
  border: 1px solid #ccc;
  overflow: hidden;
}

.child-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 100%); /* 取父元素宽高中的最小值作为容器宽度 */
}

.child {
  padding-top: 100%; /* 基于容器宽度的100%实现正方形高度 */
  background-color: #42b983;
}

原理：child-wrapper的宽度被min(100%, 100%)限制为父元素的最短边，child的padding-top:100%会基于这个宽度生成等长的高度，从而形成正方形。

关于你提到的@when规则：目前它仍处于CSS草案阶段，浏览器支持度极低，且无法直接获取父元素的宽高属性，因此不适合用于生产环境。

内容的提问来源于stack exchange，提问作者Eugene