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，響應式設計，圖像不調整大小

回答

相關問題