如何根据父div来缩放内部内容？

Question

图片清楚地描述了内部内容大于父容器，所以我想使用缩放技术，以便内部内容按比例减少以适合父容器。

那么，我该如何实施？

---

我刚才谈到使用这样的缩放技术：

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

但我已经陷入困境，我怎么能用jquery或javascript来计算缩放值呢！

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

});

希望这有帮助。