Originally, I wanted to say that width is set by percentages, but I think that percentages are not necessarily required to achieve this effect, so I changed the words
Thank you very much for the answer I adopted! This problem has puzzled me for a long time. It has always been implemented with js. The original padding-top usage percentage is based on the percentage of the width of the parent element! I just found out, too out.
In addition, I found that css3 has several units to solve this problem, but Android 4.4 or above is supported, so it cannot be used.
Vw: viewpointwidth, window width, 1vw equal to 1% of window width.
VH: Viewpoint Height, Window Height, 1vh equals 1% of Window Height.
Vmin: the smaller of VW and vh.
VMAX: the larger of VW and vh.
VW, VH, VMIN, VMAX: IE9+local support, chrome/firefox/safari/opera support, ios safari 8+ support, Android browser4.4+ support, chrome for android39 support
width: 50%; padding-top: 50%;