画像はウィンドウサイズで動的にリサイズされません

Question

サイズが250x50pxの画像をウィンドウサイズに応じてサイズを変更する（小さくする）、つまり反応させたいと思います。

#wrapperはページ全体の内容を保持します。 #headerには画像とナビゲーションバーがあります。

@media screenを使用するとこれが簡単になることがわかりますが、私は純粋なCSSアプローチを探しています。

HTML：

<div id="wrapper"> 
     <div id="header"> 
      <div style="max-width:500px;"> 
       <img id="logo" src="images/logo.jpg" alt="logo" href="#"> 
     </div> 
    </div> 

をCSS：

#wrapper{ 
    width: 100%; 
    height: auto; 
} 

#header{ 
    height: 100px; 
    min-width: 300px; 
    border-bottom: 1px solid black; 
} 
#logo{ 
    float: left; 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
} 

Answer 1

あなたのコードのいくつかの問題を抱えている、

ここ

は、私が現在使用しているものです

• は
はIEの必要はこちら min-widthため
• 必要をハッキングしない#header
• の子divにborder-bottomを入れ、インラインスタイルを使用しないでください。

注：あなたが小さく取得するには、このイメージを必要とする理由私は見ていない、下の画面が320pxあるとき、その250x50を見ることができますので、ここですでに完全に

に合ったスニペット

です

#wrapper { 
 
    width: 100%; 
 
    border: dashed red 1px 
 
} 
 
#header > div { 
 
    max-width: 500px; 
 
    border-bottom: 1px solid black; 
 
} 
 
#logo { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block 
 
}

<div id="wrapper"> 
 
    <div id="header"> 
 
    <div> 
 
     <img id="logo" src="//placehold.it/250x50" alt="logo" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

まず第一に、@mediaスクリーンを使用すると、CSSのapproacですh。あなたはそれをしたくない場合でも、あなたはEMまたは％と最小幅を与えるような単なる相対単位は、することができます：

#logo { 
    width: 20%; 
    min-width: 100px; 
} 

事がある、あなたはすでに300ピクセル、幅をminにヘッダを設定することにより、いくつかの制限を置きます内部を最大幅500pxに分割する必要があります。そのように柔軟性を持たせたい場合は、別のユニットも検討してください。