html - 流体图像仅在标题下方增长

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，我想要做的是始终根据父级的宽度来增加图像，就像 fiddle 中的第一张图像发生的那样。应该添加哪些样式？

Note: The first image is working properly only because the heading below is long enough.

---

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