Question

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

如何设置我放置图像但保持响应的包装器的宽度（图像响应调整大小）？

以下是代码：

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宽度为1000像素。请100％ 2，你的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/

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

2 个答案: