How can css set the Gao Heng of div to be equal to the width when the width value is fixed to the browser width?

  css3, question

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%;