This function receives the id of an element (frame) and calculates the correct height and width so it fits inside its parent element, while keeping its aspect ratio. Before I had a way to calculate the frame ratio dynamically, but I decided it was easier to simply hard code it, it calculates it through naturalHeight and naturalWidth if it's an image, and use 0.5625 for the rest which are iframes, and that ratio makes sense for all of those. It works, tried it in different sizing scenarios, what I'm not 100% sure is if the math involved to calculate the correct width and height in all cases is correct.
In all cases the element should fill as much as possible.
function fix_frame(frame_id)
{
var id = `#${frame_id}`
var frame = $(id)
if(frame_id === "media_image_frame")
{
var frame_ratio = frame[0].naturalHeight / frame[0].naturalWidth
}
else
{
var frame_ratio = 0.5625
}
var parent = frame.parent()
var parent_width = parent.width()
var parent_height = parent.height()
var parent_ratio = parent_height / parent_width
var frame_width = frame.width()
var frame_height = frame.height()
if(parent_ratio === frame_ratio)
{
frame.width(parent_width)
frame.height(parent_height)
}
else if(parent_ratio < frame_ratio)
{
frame.width(parent_height / frame_ratio)
frame.height(parent_height)
}
else if(parent_ratio > frame_ratio)
{
frame.width(parent_width)
frame.height(parent_width * frame_ratio)
}
}