Fluid image only grows with heading below - html

Question

html
<div class="article">
<img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/01/Cookies1-520x245.jpg"/>
<div class="dateAuthor">
<span class="date">Jan 4, 2014</span>
<span>— By </span>
<span class="author">Jonathan Lakin</span>
</div>
<h1>Cookies Tell You A Lot About Your Audience, But Most of it is Wrong</h1>
</div><div class="article">
<img src="http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2014/01/20140103_151801-520x245.jpg"/>
<div class="dateAuthor">
<span class="date">Jan 4, 2014</span>
<span>— By </span>
<span class="author">Jonathan Lakin</span>
</div>
<h1>Ten Website Trends To Expect</h1>
</div>
css
.article{
display: inline-block;
vertical-align: top;
margin: 0 1.6839378238341968911917098445596% 30px 1.6839378238341968911917098445596%; /* 13px / 772px */
}
.article img{
max-width: 360px;
width: 100%;
}
#media only screen
and (max-width : 770px) {
.article img{
max-width: 100%;
}
.article h1{
max-width: 97.222222222222222222222222222222%; /* 350px / 360px */
}
}
jsFiddle
The problem here is image only grows to the width of the parent if the heading below is long enough to take the width of the parent, else it stays up to the maximum width of the image which is 520px, What I want to do is always grow the image according the width of the parent as what happens to the first image in the fiddle. What styles should be added?
Note: The first image is working properly only because the heading
below is long enough.

Answer 1

You did your img sizes backwards and you need to give .article a size to be so things inside know what to be.
JSFiddle Sweetness
CSS
.article img {
max-width: 100%;
width: 520px;
}
#media only screen and (max-width : 770px) {
.article {
width: 95%;
}
.article img {
max-width: 100%;
width: 100%;
}
.article h1 {
max-width: 97.222222222222222222222222222222%;
/* 350px / 360px */
}
}