如何按父div缩放内部内容？

Question

Picture clearly describes that the inner contents is larger than than the parent container, so I want to use zoom technique so that the inner contents proportionally decrease to fit the parent container.

So, how could I implement?

---

I'm just talking about using zoom technique like this:

.inner-container{
zoom: .5;
-moz-transform: scale(.5);
}

But I'm stuck how can I calculate using jquery or javascript the zoom value should be set!

Answer 1

I guess what you would like to do is something like this:

DEMO: http://jsfiddle.net/naokiota/8JAUA/17/

HTML:

<div class="parent">
    <div class="inner-content">
      .....
    </div>
</div>

JavaScript:

$(".parent").each(function(){

    // get parent height you intend to show
    var p   = $(this).css("padding").replace("px","");
    var h   = $(this).css("height").replace("px","");
    var ph  = h-2*p; 

    // get inner height
    var $ic = $(this).find(".inner-content");
    var ih  = $ic.height();

    // set zoom size
    $ic.css('zoom',ph/ih);

    $(this).height(ph);

});

Hope this helps.