如何按父div縮放內部內容？

Question

圖片清楚地描述了內部內容大於父容器，因此我想使用縮放技術，以便內部內容按比例減小以適合父容器。

那么，我該如何實施？

---

我只是在談論使用這樣的縮放技術：

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

但是我卡住了如何使用jquery或javascript計算應該設置zoom值！

Answer 1

我想您想做的是這樣的：

演示： 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);

});

希望這可以幫助。