1

我不是在寻找关于图像的创造性解决方案，我已经阅读了大量关于加载图像等的内容。

我只是在做一些基本的响应式设计，想加载一个大图像，然后在窗口变小时把它压扁。

我写了以下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 语法是什么？

谢谢 ：）

4

2 回答 2

5

应用于max-width您的图像。

img {
    max-width: 100%;
}

http://jsfiddle.net/VBHhD/

我也会使用无序列表进行导航，但这只是我。

于 2013-07-20T13:55:50.643 回答
0

在您的 CSS 中，您正在使用最大宽度为 420px 的媒体查询，这是一个移动视图。您是否尝试过以非常低的级别调整浏览器的大小？@media (max-width: 420px){ #header #nav #search img,#header #nav #account img,#header #nav #menu img { width:50%;

} http://codepen.io/anon/pen/kchqg

于 2013-07-20T14:31:29.927 回答