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

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

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

这里是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; 
}

来源

2014-03-26 user3117275

你需要使图像柔太：

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

来源

2014-03-26 16:59:19 KevBot

嗨，我想，在Firebug的CSS：IMG和IMG SITE_TITLE，但无济于事。它所做的只是使徽标图像填满整个包装，但在调整窗口大小时不会调整大小。我错误地实施了吗？ – user3117275

不应该是最大宽度？ –

它的工作。谢谢！ – user3117275

我相信你有两个问题在这里：

1，你的.wrap是1000px的宽度。请让它100％第二，你的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/

来源

2014-03-26 17:25:31 SULTAN

感谢您的反馈！我很感激。 – user3117275

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

回答

相关问题