流体图像仅随着标题下方增长

Question

HTML

<div class="article">
            <a href="#"><img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/01/Cookies1-520x245.jpg"/></a>
            <div class="dateAuthor">
                <span class="date">Jan 4, 2014</span>
                <span>&mdash; By </span>
                <span class="author">Jonathan Lakin</span>
            </div>
            <h1><a href="#">Cookies Tell You A Lot About Your Audience, But Most of it is Wrong</a></h1>
        </div><div class="article">
            <a href="#"><img src="http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2014/01/20140103_151801-520x245.jpg"/></a>
            <div class="dateAuthor">
                <span class="date">Jan 4, 2014</span>
                <span>&mdash; By </span>
                <span class="author">Jonathan Lakin</span>
            </div>
            <h1><a href="#">Ten Website Trends To Expect</a></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

这里的问题是，如果下面的标题足够长以获取父级的宽度，则图像只会增长到父级的宽度，否则它会保持最大的图像宽度520px，我想要做的是始终根据父母的宽度增长图像，因为小提琴中的第一个图像会发生这种情况。应该添加哪些样式？

  

注意：第一张图片只是因为标题才能正常工作   下面足够长。

---

Answer 1

你的img尺寸向后倾斜了，你需要给.article一个大小，以便知道该怎么做。

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 */
    }
}