CODEWITHSUNDEEP
cssiframe
Brown KL
Brown KL

Reputation: 2385

How to maintain an aspect ratio of iframe

I have an iframe with the following css:

.preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;

    max-width: 1280px;
    max-height: 720px;
    margin: auto;
}

It lives inside a container with the following CSS:

.wrapper {
   position: absolute;
   width: calc(100% - 440px);
   height: 0;
   left: 0;
   top: 0;
   bottom: 0;
   text-align: center;
   background: #1c1c1c;
   display: flex;
   padding-bottom: 56.25%;
}

the wrapper lives inside a div with 

position: fixed

I'm trying to maintain an aspect ratio of 16:9 for the iframe as the window resizes, but the above is not working. What should I do?

Upvotes: 4

Views: 2929

Answers (2)

joe
joe

Reputation: 5642

This is now possible with the new aspect-ratio CSS property:

.element {
  width: 100px;
  aspect-ratio: 2 / 1;
  /* height will automatically be set to 50px */
}

More info here: https://css-tricks.com/almanac/properties/a/aspect-ratio/

It's available in all modern browsers.

Upvotes: 7

sdvnksv
sdvnksv

Reputation: 9678

<div class="wrapper">
  <iframe class="preview-iframe"> ... </iframe>
</div>

.wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
.preview-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

Upvotes: 5

Related Questions