我只是在进行一些基本的响应式设计,并希望加载一个大图像,然后在窗口变小时将其压扁.

我写了以下CSS：

@media (max-width:420px){
     #header #logo{
        width:60%;
        float:left;
        background:red;
    }

    #header #logo #image{
        margin:5%;
        width:20%;
        float:left;
        background:green;
    }

    #header #nav{
        width:40%;
        float:left;
        background:purple;
    }

    #header #nav #search{
        max-width:33%;
        float:left;
    }

    #header #nav #account{
        max-width:33%;
        float:left;
    }

    #header #nav #menu{
        max-width:33%;
        float:left;
    }
 }

和HTML一起去：

<div id="logo">
        <div id="image">
            s
        </div>
    </div>
    <div id="nav">
        <div id="search">
            <img src="assets/images/mobile-search.png"/> 
        </div>
        <div id="account">
            <img src="assets/images/mobile-account.png"/> 
        </div>
        <div id="menu">
            <img src="assets/images/mobile-menu.png"/> 
        </div>
    </div>

当我调整窗口大小时,图像没有调整大小.
实现此目的的CSS语法是什么？

谢谢 ：)