How can I scale the content of an iframe?

前端 未结 17 2071
后悔当初
后悔当初 2020-11-22 11:46

How can I scale the content of an iframe (in my example it is an HTML page, and is not a popup) in a page of my web site?

For example, I want to display the content

相关标签:
17条回答
  • 2020-11-22 12:17

    If your html is styled with css, you can probably link different style sheets for different sizes.

    0 讨论(0)
  • 2020-11-22 12:17

    As said, I doubt you can do it.
    Maybe you can scale at least the text itself, by setting a style font-size: 80%;.
    Untested, not sure it works, and won't resize boxes or images.

    0 讨论(0)
  • 2020-11-22 12:19

    For those of you having trouble getting this to work in IE, it is helpful to use -ms-zoom as suggested below and use the zoom function on the #wrap div, not the iframe id. In my experience, with the zoom function trying to scale the iframe div of #frame, it would scale the iframe size and not the content within it (which is what you're going for).

    Looks like this. Works for me on IE8, Chrome and FF.

    #wrap {
      overflow: hidden;
      position: relative;
      width:800px;
      height:850px;
      -ms-zoom: 0.75;
    }
    
    0 讨论(0)
  • 2020-11-22 12:21

    Kip's solution should work on Opera and Safari if you change the CSS to:

    <style>
        #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
        #frame { width: 800px; height: 520px; border: 1px solid black; }
        #frame {
            -ms-zoom: 0.75;
            -moz-transform: scale(0.75);
            -moz-transform-origin: 0 0;
            -o-transform: scale(0.75);
            -o-transform-origin: 0 0;
            -webkit-transform: scale(0.75);
            -webkit-transform-origin: 0 0;
        }
    </style>
    

    You might also want to specify overflow: hidden on #frame to prevent scrollbars.

    0 讨论(0)
  • 2020-11-22 12:22

    After struggling with this for hours trying to get it to work in IE8, 9, and 10 here's what worked for me.

    This stripped-down CSS works in FF 26, Chrome 32, Opera 18, and IE9 -11 as of 1/7/2014:

    .wrap
    {
        width: 320px;
        height: 192px;
        padding: 0;
        overflow: hidden;
    }
    
    .frame
    {
        width: 1280px;
        height: 786px;
        border: 0;
    
        -ms-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -o-transform: scale(0.25);
        -webkit-transform: scale(0.25);
        transform: scale(0.25);
    
        -ms-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    

    For IE8, set the width/height to match the iframe, and add -ms-zoom to the .wrap container div:

    .wrap
    {
        width: 1280px; /* same size as frame */
        height: 768px;
        -ms-zoom: 0.25; /* for IE 8 ONLY */
    }
    

    Just use your favorite method for browser sniffing to conditionally include the appropriate CSS, see Is there a way to do browser specific conditional CSS inside a *.css file? for some ideas.

    IE7 was a lost cause since -ms-zoom did not exist until IE8.

    Here's the actual HTML I tested with:

    <div class="wrap">
       <iframe class="frame" src="http://time.is"></iframe>
    </div>
    <div class="wrap">
        <iframe class="frame" src="http://apple.com"></iframe>
    </div>
    

    http://jsfiddle.net/esassaman/PnWFY/

    0 讨论(0)
  • 2020-11-22 12:22

    html{zoom:0.4;} ?-)

    0 讨论(0)
提交回复
热议问题