Code to make elements fit within their container while keeping their aspect ratio 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 &lt; frame_ratio)
    {
        frame.width(parent_height / frame_ratio)
        frame.height(parent_height)
    }

    else if(parent_ratio &gt; frame_ratio)
    {
        frame.width(parent_width)
        frame.height(parent_width * frame_ratio)
    }
}
Although you posted your code it would help if you told us what you want help with?

This is possible to do using CSS. I've seen multiple solitions, here is the first one I found on Google: http://www.mademyday.de/css-height-equals-width-with-pure-css.html