CSS，自適應設計，圖片未調整大小

Question

將標頭圖像放在CSS包裝器中后，它停止調整大小。 我指定了包裝的寬度b / c，我希望向右的導航位於下面的空白區域的正上方-向右刷新。

如何設置放置圖像但保持響應速度的包裝紙的寬度（圖像響應於調整大小）？

這里是URL； http://www.insidemarketblog.com/

這是代碼：

的HTML

<div id="header">
    <div class="wrap">
        <span class="menu_control">≡ Menu</span>
<ul class="nav"><li class="page_item page-item-35"><a href="http://www.insidemarketblog.com/us/">ABOUT US</a></li></ul>
        <h1 id="site_title"><a href="http://www.insidemarketblog.com"><img id="thesis_logo_image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy" width="400" height="87" title="click to go home" />
</a></h1>
    </div>
</div>

CSS：

.wrap {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #000;
    position: relative;
}

Answer 1

您還需要使圖像彎曲：

img {
    display: block;
    width: 100%;
    height: auto;
}

Answer 2

我相信您在這里有兩個問題：

1，您的.wrap寬度為.wrap 。 請設為100％2nd，您的img css應該具有最大寬度：400px； 寬度：100％

這樣，您將完全按照自己的方式獲取img。

這是CSS：

.wrap {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #000;
    position: relative;
}

img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

實際操作中查看它： http : //jsfiddle.net/salota8550/59LKP/