<p>How can I get an image to stretch the height of a <code>DIV</code> class?</p>

<p>Currently it looks like this:</p>

<p><img src="https://i.stack.imgur.com/DcrXC.png" width="650" /></p>

<p>However, I would like the <code>DIV</code> to be stretched so the <code>image</code> fits properly, but I do not want to resize the `image.</p>

<p>Here is the CSS for the <code>DIV</code> (the grey box):</p>

<pre class="lang-css prettyprint-override"><code>.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
}
</code></pre>

<p>The CSS being applied on the image:</p>

<pre class="lang-css prettyprint-override"><code>.product{
    display: inline;
    float: left;
}
</code></pre>

<p>So, how can I fix this?</p>

[{'answer_id': 41201, 'author': 'DevelopingChris', 'author_id': 1220, 'author_profile': 'https://Stackoverflow.com/users/1220', 'pm_score': 1, 'selected': False, 'text': "<pre><code>display:inline  \nfloat:left  \n</code></pre>\n\n<p>is your problem</p>\n\n<p>Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.<br>\nAnother approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.</p>\n\n<p><strong>Update:</strong> After viewing your link Your height issue as displayed, is because the floats are not being cleared.</p>\n"}, {'answer_id': 41203, 'author': 'John Millikin', 'author_id': 3560, 'author_profile': 'https://Stackoverflow.com/users/3560', 'pm_score': 3, 'selected': False, 'text': '<p>In the markup after the image, insert something like <code>&lt;div style="clear:left"/&gt;</code>. A bit messy, but it\'s the easiest way I\'ve found.</p>\n\n<p>And while you\'re at it, put a bit of margin on that image so the text doesn\'t butt up against it.</p>\n'}, {'answer_id': 41232, 'author': 'Domenic', 'author_id': 3191, 'author_profile': 'https://Stackoverflow.com/users/3191', 'pm_score': 2, 'selected': False, 'text': '<p>Assuming @John Millikin is correct, the code</p>\n\n<pre><code>.product + * { clear: left; }\n</code></pre>\n\n<p>would suffice to do the same thing without forcing you to manually adjust the code after the div.</p>\n'}, {'answer_id': 41235, 'author': 'John Sheehan', 'author_id': 1786, 'author_profile': 'https://Stackoverflow.com/users/1786', 'pm_score': 6, 'selected': True, 'text': '<p>Add <code>overflow:auto;</code> to <code>.product1</code></p>\n'}, {'answer_id': 42090, 'author': 'Jeremy', 'author_id': 2076253, 'author_profile': 'https://Stackoverflow.com/users/2076253', 'pm_score': 2, 'selected': False, 'text': "<p>One trick you can use is to set the <code>&lt;div&gt;</code>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.</p>\n\n<p>Here's how the class should look:</p>\n\n<pre><code>.product1 {\n    width: 100%;\n    padding: 5px;\n    margin: 0px 0px 15px -5px;\n    background: #ADA19A;\n    color: #000000;\n    min-height: 100px;\n    overflow: hidden;\n}\n</code></pre>\n"}, {'answer_id': 47810, 'author': 'David Heggie', 'author_id': 4309, 'author_profile': 'https://Stackoverflow.com/users/4309', 'pm_score': 2, 'selected': False, 'text': '<p>This looks like a job for <a href="http://www.positioniseverything.net/easyclearing.html" rel="nofollow noreferrer">clearfix</a> to me ...</p>\n'}, {'answer_id': 8324360, 'author': 'Palanikumar', 'author_id': 1019435, 'author_profile': 'https://Stackoverflow.com/users/1019435', 'pm_score': 2, 'selected': False, 'text': '<p>Try the following:</p>\n\n<pre><code>.Strech\n{\n    background:url(image.jpg);\n    background-size:100% 100%;\n    background-repeat:no-repeat;\n\n    width:500px;\n    height:500px;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/41198', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2592/']