如何強制圖片不會大於它所在的部分？

我正在研究一個Tumblr主題，我有一個內容旁邊的頭像圖片。然而，圖像比內容大，並且正在突破該部分。請參閱：如何強制圖片不會大於它所在的部分？

我怎樣才能防止圖像增長超出部分？

HTML：

<article id="" class="answer"> 
     <section class="question"> 
      <img src="http://33.media.tumblr.com/avatar_75879837bcba_128.png" alt=""><p class="asker"><a href="#">George</a> asked</p><p class="question">This is my question. I want to know what you're going to do about this. Is it a good idea? 
     </section> 
     <p>Answer</p> 
</article>

CSS：

.question { padding: 0 2em; } 
article { margin: 1.5em auto; } 
.question img { float: left; } 
.question img { width: auto; height: 100%; }

演示：http://jsfiddle.net/xb0ms51r/

來源

2015-04-20 Justin

最主要的是 - 你需要做一個明確的修復，因爲你設置圖像爲浮動，嘗試將以下內容添加到工作表工作表中。

section.question:after { 
    content: ""; 
    clear: both; 
    display: table; 
}

更新演示：http://jsfiddle.net/xb0ms51r/1/

來源

2015-04-20 22:12:00 Stickers

這就是缺少的。謝謝！ – Justin

您需要設置CSS的圖片如下：

.question img { 
float: left; 
width: 150px; 
height: auto; 
    }

將高度設置爲自動將強制圖像保留高寬比。

此外，它可能是設置HTML width和height圖像標籤是一個好主意，這將通過CSS被覆蓋，但在結構上正確的有

來源

2015-04-20 21:47:50 Martin

添加.question img {max-width:100%; max-height:100%;}你的CSS，以確保它在保持圖片的比例的同時適合該部分的100％的約束。

就這麼簡單！

來源

2015-04-20 21:48:50

我已經試過這樣做，它不產生變化。我找過其他可能發生衝突但無法找到的類。 – Justin

我自己無法再現問題，可以將所有代碼與您的問題進行內聯或使用[jsfiddle]（http://www.jsfiddle.net）？ –

http://jsfiddle.net/xb0ms51r/ – Justin

如何強制圖片不會大於它所在的部分？

回答

相關問題