Automatically resize image an inline image in CSS - html

Question

I want my inline images to automatically resize with browser size and at the same time it should be inline with the header too. I have already tried solution given here but it is not working for me.
Here is my code:
#header_title {
font-weight: bolder;
text-align: center;
}
#header_photo {
display: none;
}
.floatingimage {
float: right;
max-width: 100%;
height: auto;
}
#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;
}
}
<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>
You find this code on jsfiddle here.
NOTE: I am using Firefox 53.0.3(32-bit)

Answer 1

I slightly modified your HTML and CSS. I add flex display and image height related to width.
HTML code:
<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"/>
</aside>
CSS code:
header {
display: flex;
}
#header_title
{
font-weight: bolder;
text-align: center;
}
#header_photo
{
display: none;
max-width: 100%;
height: auto;
align-self: center;
}
#header_photo img {
width: 100%;
height: auto;
max-height: 120px;
}
.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;
}
}
You check it on fiddle here

Answer 2

You have sized the image using inline-styling; that is the main problem. You can do two 2 things:
add the width and height to the floatingimage class
OR
create a new class e.g. .wh100, with width:100px; and height:100px; and use a second class with the .floatingimage in your html e.g img class="floatingimage wh100"
In either option, remember to REMOVE the inline styling from the html!!
Then your images should size appropriately.
Give that a whirl
RE-EDIT: (back on computer - sigh..).. here you go.. the fiddle i posted a while ago with the header narrowed to 75%.
header {
width: 75%;
height: auto;
margin: 0 auto;
padding: 0;
}
#header_title {
font-weight: bolder;
text-align: center;
max-width: 80%;
}
#header_photo {
/*display: none;*/
margin: 0;
padding: 0;
max-width: 20%;
height: auto;
float: right;
}
.floatingimage {
position: relative;
display: none;
}
.wh100 {
width: 100px;
height: 100px;
}
#media all and (max-width:480px){
#header_photo {
margin-top: 8%!important;
}
}
#media all and (max-width:1024px) {
#header_title,
#header_photo img {
margin: 0;
padding: 0;
top: 2%;
display: inline!important;
vertical-align: middle!important;
}
#header_title {
max-width: 80%;
position: relative;
float: left;
}
#header_photo {
margin-top: 4%;
max-width: 20%;
position: relative;
float: right;
}
#header_photo img {
position: relative;
max-width: 100%;
height: auto;
}
}
<header>
<div id="header_title">
<h1>Title h1</h1>
<h3>Title h3</h3>
</div>
<aside id="header_photo">
<img class="floatingimage wh100" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" />
</aside>
</header>
New fiddle