How to make image fit in div using Jquery

Tags: jquery,css,xhtml

Problem :

currently, I having a page with the layout like this:

-----------------------------
Header (100%)
-----------------------------
|                   | Desc  |
|    unknown size   |       |  
|                   | 200px |  
|      Image here   |       |  
|                   |       |  
|                   |       |  
|                   |       |  
|                   |       |  
-----------------------------
Footer 100% height stick bottom
-----------------------------

that the idea of the layout. when i resize the height or width, the only thing that resize is the image and it's div

But how should i archive this using either jquery or css?

How should I have the image inside that div resize arcording to the height and width of it's div box?

http://www.msnbc.msn.com/id/35385037/ns/news-picture_stories/displaymode/1247/?beginSlide=1 something like this for example

---

Solution :

var divElem = $("#yourdivid");
var ht = divElem.height();
var wdt = divElem.width();

$("#yourimageid").css({'height' : ht, 'width' : wdt});