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});

    CSS Howto..

    how can i center the text inside my css div circle

    (Mobile View) How to make UI tabs heading to work as a drop down

    How to put bootstrap code inline

    How to get the style value using attr

    How do I remove a hover effect if the Element has focus?

    Trying to show list items vertically but two items horizontally

    On scroll up use the animate() and show the div

    HTML & CSS - Table attribute in CSS is behaving usual. Don't know how to fix it

    jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?

    How to overlay a div over a canvas CSS

    CSS Fonts: Howto convert multiple TTF files into one file?

    How to center div within another div?

    How to hardware accelerate a box-shadow animation in CSS?

    HTML/CSS How to make a menu closed and then use class=“active”

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    Vim: How would I recursively run “:sort” for everything between curly braces?

    How to set focus/active on the clicked li(tab) in angular.js

    How do I stop my 'body' from eating my 'foot'

    How to select a css class as selected dynamically in mvc

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to specify which element to change background color jquery

    How to apply css selector in ZK

    How do I make a text input non-editable?

    how to append an icon to an input search?

    How can I ensure that no other text is on the same line as my heading tag?

    Android stock browser: How to prevent double tap closing browser

    Jquery Dropdownlist not shows the selected item.?

    How to use “Monotype Corsiva” font in CSS statement?

    How can I align text to the top and the bottom of the same div css?

    How to inherit css from grandparent tag? [duplicate]