css outer div max-width scale inner image

Question

Is it possible to fit an image to its outer div width which is limited by max-width?

Here is a fiddle example: http://jsfiddle.net/7UZG7/

<div style="width:100%;">
<div style="max-width:30%; background-color:red; float:right; padding:10px;"><img src="http://www.acasa.org.br/ensaio/grande/506.jpg"></div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div>

Answer 1

Sure it is :)

make your CSS like so

.container {
    width:100%;
}
.image-container {
    width:100%;
    max-width:30%;
}
.image-container img {
    width:100%;
    height:auto;
}

and HTML like so

<div class="container">
    <div class="image-container">
         <img src="/img/source">
    </div>
    <p>Your Text</p>
</div>

As a side note, try not to inline style items - makes for less reusable code. Let me know if there is anything else I answer.