HTML / CSS / JAVASCRIPT - 缩放固定大小的项目以适应流体容器

Question

I was wondering if anyone else has hit this problem? My goal is to scale some fixed sized divs with text and images to fit within a fluid div container. Here is a more detailed explanation:

I have to give an as accurate as possible preview of a print layout in HTML so I am setting my item sizes to MM for dimensions and to PT for text, this allows me to copy an existing print layout accurately. Now my problem is that I need these page previews to fit in a div which would be set to say 80% height. I am struggling with this one as I can't think of an easy way to convert lots of MM and PT measurements into percentages, So I thought maybe there could be some involvement of JavaScript?

Any help would be appreciated.

Answer 1

Jquery and CSS where used to solve this in the end. There is a css property named zoom. This can be increased or decreased using the below example:

$('.zoomMinus').click(function ( ){
        zoom -= 10;
        $("#divtozoom").css('zoom', zoom + "%");


    });
 $('.zoomPlus').click(function ( ){
        zoom += 10;
        $("#divtozoom").css('zoom', zoom + "%");
    });