Confining images to containers - html

Question

Imagine the following code...
<div style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</div>
Or this...
<li style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</li>
If these containers contained text only, you would see a very slender black box (perhaps 25-50 pixels tall) containing text. In fact, that's exactly what I see - except for the images, which extend above or below the container.
I know how to regulate image width, but how do I handle height? I guess there are two choices: 1) Make each image adapt to its container, or 2) make the container height adjust to the image. I think the second option sounds better. Also, I should point out that the amount of text each container contains is all over the map; some could contain a couple paragraphs.
EDIT:
Sorry, I left out an important piece of information. Most of these images are FLOATED to the right or left of the text. Therefore, I don't want the images to span the width of the container. I'd prefer to somehow make the container higher, so the image doesn't protrude.
Anyway, does anyone have any tips for dealing with this problem?

Answer 1

Would this be a start?
.container {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #ccc;
vertical-align: top;
height: 140px;
}
.cell.image {
width: 140px;
height: auto;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.cell.image img {
max-width: 100%;
width: auto;
height: 100%;
}
<div class="container">
<div class="row">
<div class="cell image" style="background-image: url('http://lorempixel.com/450/300/nature')">
</div>
<div class="cell text">
Some text
</div>
</div>
<div class="row">
<div class="cell text">
Some text
</div>
<div class="cell image" style="background-image: url('http://lorempixel.com/300/450/nature')">
</div>
</div>
</div>

Answer 2

You have to assign a width:100% rule to the image, in order to tell it to stretch 100% (not more) of the parent container.
If you infact try to remove that rule, you'll see the image exceeds the container size.
Here you can see an example:
div{
border:1px solid #000;
}
img{
width:100%;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ex, voluptate rerum optio omnis dolorum, deleniti nemo, similique totam voluptatibus quae? Provident assumenda accusamus aliquid laudantium voluptate aperiam dolore! Deserunt!<img src="http://lorempixel.com/550/350/animals" alt=""></div>
EDIT:
If images are floated I suggest you to use two divs, one for text , one for images.
Here is an example:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 1px solid #000;
}
img{
width:100%;
}
.lfloat {
width: 800px;
margin: 0 auto;
}
.text,
.image {
position: relative;
float: left;
width: 50%;
}
<div class="lfloat">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quam, cupiditate, soluta expedita error et adipisci placeat ullam! Eveniet mollitia excepturi eum nesciunt ipsam nihil illo modi voluptas non voluptate.
</p>
</div>
<div class="image"><img src="http://lorempixel.com/300/200/animals" alt=""></div>
</div>