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 に答える