Learn how to maintain the aspect ratio of an element with CSS.
What is aspect ratio?
The aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television, and default for YouTube videos).
Read on how to do it in this tutorial: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
Create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resized:
Try it yourself here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio