Image-Resize

Resize image automatically.

by Batakrishna Sahu

HTML

<header>
		<div id="header_title">
				<h1>Title h1</h1>
				<h3>Title h3</h3>
		</div>
				<aside id="header_photo">
					<img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" width="100px" height="100px"/>
				</aside>
</header>

CSS

#header_title
{
	font-weight: bolder;
	text-align: center;
}

#header_photo
{
	display: none;
	max-width: 100%;
	height: auto;
}

.floatingimage
{
	float: right;
}

@media all and (max-width: 1024px)
{
  	#header_title
	{
		margin-left: 10%;
		min-width: 67%;
		max-width: 77%;
		display: inline-block;
		vertical-align: top;
		position: relative;
	}

	#header_photo
	{
		display: inline-block;
    	vertical-align: top;
    	max-width: 20%;
    	height: auto;
	}
}