Is it possible to use <img> as a full background image without javascript?

Question

When I use an image as background-image with cover property I get a full screen image with perfect ratios. Is it possible to get same result with img, without javascript?

I would like to create a parallax background. When the user scroll the content below the image slides over the image.

The problem is with the size of the image, I added width: 100%, but it doesn't work as the background-size: cover. Should I increase the width? What is the best practice?

The JSFiddle version is available here.

$(document).ready(function(){
	
    function contentHeight() {
    	var wheight = $(window).height();
        $('#content').css({
        	'margin-top' : wheight
        });
    }
    
    contentHeight();
    
    $(window).resize(function(){
    	contentHeight();
    });
});

html, body {
    margin: 0;
}

#image {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#image img {
    width: 100%;
}

#content {
    background: #ccc;
    position: relative;
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="image"><img src="http://www.planwallpaper.com/static/images/canberra_hero_image.jpg"></div>
<div id="content">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

Answer 1

If you would like to emulate background-size: cover with an img tag you can do that with the css property object-fit and the value cover. You can check support here - note it is limited (no MS support at the moment).

DEMO

You can emulate background-size: cover with pure css, by simply setting the img height and width to auto; this will preserve the aspect ration of the img. But it will not center the img perfect, so an easy fix is to add a few rules to make sure it is sitting in the middle of the parent container; make sure the parent has overflow: auto.

DEMO

You can see a comparison between background-size: cover and the second technique here: COMPARISON

For this specific img the second technique is acceptable, but once if the image size varies to any degree, issues will become present, as you can see in this fiddle.