How to maintain aspect ratio of html container using only CSS -

the title little misleading since maintaining aspect ratio of , html element trivial, using width , padding-bottom or padding-top in percentages. however, scenario little different. maybe solution trivial brain fried.

so in case, have content div inside container div. assumption container div can have dimensions , size. requirement inner div needs maintain it's own aspect ratio needs fit either height or width of container div, whichever corresponds closer aspect ratio of content div.

so example, content div has aspect ratio 16:9. container div 500px wide , 1000px high. in case, content div size 500px wide , 281px high, white space above , below content div. container div might resized 1000px wide , 500px high, in case content div resize 889px width , 500px height, white space left , right of content div.

there's less convoluted way explain scenario again, brain fried today. appreciated.

edit: looking css solution. know possible js/jquery.

what want use object-fit: cover have best looking effects in case. unfortunately, css-only solution in case not give desired results, stated above, javascript/jquery needed.