How can I make an image max-width respect a percentage parent div width?

Question

I have two floated left divs.. One with width = 20% Another with width = 80%

Inside this 20% width div I have an image with 300px width...

If my 20% area is smaller then 300px, I would like to make my image resize and fits inside this 20% div...

Something like this:

<div class="container">

   <div style="float:left; width:20%;">

       <img src="imageWith300pxWidth.jpg" />

   </div>

   <div style="float:left; width:80%;"></div>

</div>

Answer 1

.image {
  width: 100%;
  max-width: 300px;
}

• If your container width is larger than 300px, your image will stick to 300px;
• If your container width is smaller then the image will resize to fit into it