图片加载前的占位高度预设纯CSS实现（自适应屏幕的高宽比）——CSS黑魔法

可以通过以下纯CSS实现图片加载前的占位高度预设：

1. 首先，为图片容器设置一个固定的高度和宽度，例如：

.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9的高宽比 */
  position: relative;
}

其中，padding-bottom的值是根据图片的高宽比计算得出的。例如，如果图片的高宽比为16:9，则padding-bottom的值应为56.25%（9除以16乘以100）。

2. 接下来，在图片容器中添加一个伪元素，并设置其背景颜色为占位颜色，例如：

.image-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1; /* 占位颜色 */
}

这样就可以在图片加载前显示一个占位颜色的矩形，占位矩形的高度和宽度与图片容器相同。

3. 最后，将图片设置为绝对定位，并将其宽度和高度设置为100%，例如：

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这样，当图片加载完成后，它会填满整个图片容器。而在图片加载前，占位矩形会占据整个图片容器的高度和宽度，从而保持了容器的高宽比。