Max-height - Stretch Proportionally - Not Shrink - To Fit Container, Is It Possible?

So I have some parent container/div positioned 'fixed' on the page. It's height and width are set to 100%. Within the container is an image. I currently have written some JavaScrip

Solution 1:

Is there a way of doing this with JUST CSS? In other words, is it possible for an element to stretch proportionally to it's container but not be clipped/cut-off and doing so with JUST CSS?

If you set the height of the image to 100%only without setting the width, it will stretch proportionally to its container without being clipped or cut off. Same for setting the widthonly to 100% and not setting the height.

Edit

You can't do what you want to do using only CSS as you would need to know if the aspect ratio of the image is higher or lower than its container, CSS can't do that. Have a look here for a more detailed explanation of the issue at hand by Stephan Muller

Solution 2:

All you need is to specify height and width to be 100%, eg:

#makeMeStretch {
    height: 100%;
    width: 100%;
    background: #FFF;
}

I updated your fiddle