html - CSS，响应式设计，图像不调整大小

Question

我有一个标题图片，在我将它放入 CSS 包装器后停止调整大小。我指定了包装器的宽度，b/c 我希望右侧的导航直接位于下方空白区域的上方 - 向右冲洗。

如何设置放置图像的包装器的宽度，同时保持响应能力(图像响应调整大小)？

这是网址； 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

您还需要使图像 flex :

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