Adjust width and height of iframe to fit with content in it

前端 未结 30 2729
旧时难觅i
旧时难觅i 2020-11-22 02:09

I need a solution for auto-adjusting the width and height of an iframe to barely fit its content. The point is that t

30条回答
  •  离开以前
    2020-11-22 02:41

    If you can live with a fixed aspect ratio and you would like a responsive iframe, this code will be useful to you. It's just CSS rules.

    .iframe-container {
      overflow: hidden;
      /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
      0.5625) */
      padding-top: 56.25%;
      position: relative;
    }
    .iframe-container iframe {
      border: 0;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    

    The iframe must have a div as container.

    The source code is based on this site and Ben Marshall has a good explanation.

提交回复
热议问题