aspect-ratio finally has good browser support, being supported in all major browsers bar IE.
aspect-ratio: 16 / 9;
The aspect ratio is only preferred, and is calculated using either the width or the height, whichever is set. If neither is set, it falls back to the default width: auto present on all elements. That means an element with an aspect ratio of 1 / 1 and a height of 300px will be given a width of 300px.
If both width and height are set, the aspect ratio is ignored.
The aspect ratio is considered 'preferred', as extra content will break the aspect ratio of the element. If this isn't wanted, a minimum width/height can be used to enforce the aspect ratio.