Html 流体图像仅随下面的标题增长

html

这里的问题是，如果下面的标题足够长，足以占据父级的宽度，则图像只会增长到父级的宽度，否则它将保持到图像的最大宽度，即

520px

，我要做的是始终根据父级的宽度来增长图像，就像小提琴中的第一幅图像一样。应该添加哪些样式

注意：第一个图像工作正常只是因为标题 下面足够长了

---

---

你把你的

img

尺寸倒过来了，你需要给

.article

一个尺寸，让里面的东西知道应该是什么

CSS

<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>

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

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