javascript - 如何根据父 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);

});

希望这对您有所帮助。