padding by % or max value using css

Question

Im using css to resize an iframe in order to maintain the aspect ratio of the iframe (as described here : Responsive video iframes (keeping aspect ratio), with only css?).

.iframe-wrapper {
  position:relative;
  width:100%;
  height: 0;
  padding-bottom:58%;
}

.iframe-wrapper iframe {
  position:absolute;
  left:0;
  top: 0;
  height: 100%;
  width: 100%;
}

However, the problem i am facing is that for very wide screens this causes the iframe height to be large and the user has to scroll to view the content, which i want to avoid. So i am looking for a way to set a maximum value for.iframe-wrapper padding-bottom based on the viewport size. Something like this but for the bottom-padding:

max-height: calc(100vh - 200px);

Is there a way to do this?

Thanks :-)

Alvaro · Answer 1 · 2017-01-03T21:56:35.547

1

If you want to maintain the same ratio then you could add a max-width of the screen height / your ratio (as the padding-bottom is dependant on the width) to a container div:

.container {
  margin: 0 auto;
  max-width: 178vh;// 100 / 56
}

.framewrapper {
  background: pink;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
}

.framewrapper iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

<div class="container">
  <div class="framewrapper">
    <iframe src="http://blar.com" width="20" height="10" scrolling="no"></iframe>
  </div>
</div>

If not you would have to add a media query and fix the padding to 100vh, but then the ratio won't stay the same.

edited Jan 03 '17 at 21:56

answered Jan 03 '17 at 18:03

Alvaro

9,247
8
49
76

Thanks for the useful answer. Unfortunately it seems to stop the padding-bottom trick from working properly. The width is successfully limited but the aspect ratio of the iframe doesn't seem to be maintained once the max-width kicks in - in this example at 150vh, the height of the iframe keeps enlarging as the viewport width increases, although the iframe width stops increasing as we want it to. https://jsfiddle.net/stg762zg/2/ – Matt S Jan 03 '17 at 21:36
1

@MattS if you include a container and set the max-width in it I think you can achieve what you want. Check [this JSFiddle](https://jsfiddle.net/stg762zg/4/) – Alvaro Jan 03 '17 at 21:55

score 0 · Answer 2 · answered Jan 03 '17 at 18:00

As elements with the padding-bottom trick are unaffected by the max-height property, the most efficient way to do this is to create a media query that switches the element to a different aspect ratio depending on your current browser width, like so:

.iframe-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 58%;
}

.iframe-wrapper iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

@media (min-width: 1200px) {
  .iframe-wrapper {
    padding-bottom: 40%;
  }
}

score 0 · Answer 3 · answered Feb 01 '18 at 08:43

Recently I came across an situation of such issue of padding by % or max-padding. I found a very useful hackish way ... using of transparent image.

How it works? Foremost, I must say to use this method u need to set/definite max width/height which the container will go.

Example: You have 800x600 container + left/right padding of 50px(max)

Create 50x600 transparent image(s) ... duplicate if u need for both side.
Float your contend + padding(s) accordingly
Set padding(s) to 100% height
You now have responsive padding that scale with your main container

padding by % or max value using css

3 Answers3