html - 制作响应式网站和标题图片无法正确响应

Question

我将图像标题宽度设置为 100%，当我检查 959 像素或更低的最大宽度时[我将其设置为那个]，我注意到图像没有响应并像它应该的那样移动。由于某种原因，它实际上变得比正常情况下还要大。不过，我的 aside 和 section 工作正常。

jsfiddle - http://jsfiddle.net/u04xr6pd/2/

<div class="container">
    <header>
        <a href="index.html"><img src="images/header.png" alt="taffies logo"></a>
    </header> <!-- end of header -->

</div>

CSS

@media screen and (max-width:959px){
    .container{
        width:100%;
    }
    .sidebar{
        width:30%;
    }
    .first_article{
        width:50%;
    }
    header img{
        width:100%;
    }
}

Answer 1

我会推荐这个代码...

header img{
    width:calc(100% - 50px);
    margin:0 auto !important;
}

并将完全相同的宽度应用于此类 .first_article 以使其更具响应性。