BFE.devAI解答 - CSS 问题
10. golden-ratio rectangle

To create a golden-ratio rectangle, you can set the width of the rectangle to any value you want, and then set the height to the same value divided by 1.618 (the golden ratio).

.golden-ratio {
  background-color: #ccc;
  width: 200px;
  height: calc(200px / 1.618);
}

You can adjust the width of the rectangle as needed, and the height will always be proportionally correct based on the golden ratio. If you want the width to be flexible and adjust based on the size of the container or viewport, you can use percentage values instead of pixels.

.golden-ratio {
  background-color: #ccc;
  width: 50%;
  height: calc(50% / 1.618);
}

This will create a golden ratio rectangle that takes up 50% of the width of the container.