Menu
In the HTML, put the player <iframe> in a <div> container. In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9.
The Simple Solution Using CSSBy setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained.
if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Show activity on this post. Try this one.
The ratio 9/16 is ease to change, no need to predefined 100:56.25 or 100:75 . If you want to ensure height first, you should switch width and height, e.g. height:100vh;width: calc(100vh * 9 / 16) for 9:16 portrait.
You can do this using pure CSS; no JavaScript needed. This utilizes the (somewhat counterintuitive) fact that padding-top percentages are relative to the containing block's width. Here's an example:
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: deepskyblue;
/* let's see it! */
color: white;
}<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>Bumming off Chris's idea, another option is to use pseudo elements so you don't need to use an absolutely positioned internal element.
<style>
.square {
/* width within the parent.
can be any percentage. */
width: 100%;
}
.square:before {
content: "";
float: left;
/* essentially the aspect ratio. 100% means the
div will remain 100% as tall as it is wide, or
square in other words. */
padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
clearfix you usually use, add
overflow:hidden to the parent element,
or simply float the parent container. */
.square:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
I've put together a demo here: http://codepen.io/tcmulder/pen/iqnDr
EDIT:
Now, bumming off of Isaac's idea, it's easier in modern browsers to simply use vw units to force aspect ratio (although I wouldn't also use vh as he does or the aspect ratio will change based on window height).
So, this simplifies things:
<style>
.square {
/* width within the parent (could use vw instead of course) */
width: 50%;
/* set aspect ratio */
height: 50vw;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
I've put together a modified demo here: https://codepen.io/tcmulder/pen/MdojRG?editors=1100
You could also set max-height, max-width, and/or min-height, min-width if you don't want it to grow ridiculously big or small, since it's based on the browser's width now and not the container and will grow/shrink indefinitely.
Note you can also scale the content inside the element if you set the font size to a vw measurement and all the innards to em measurements, and here's a demo for that: https://codepen.io/tcmulder/pen/VBJqLV?editors=1100
<style>
#aspectRatio
{
position:fixed;
left:0px;
top:0px;
width:60vw;
height:40vw;
border:1px solid;
font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>
The key thing to note here is vw = viewport width, and vh = viewport height
That's my solution
<div class="main" style="width: 100%;">
<div class="container">
<div class="sizing"></div>
<div class="content"></div>
</div>
</div>
.main {
width: 100%;
}
.container {
width: 30%;
float: right;
position: relative;
}
.sizing {
width: 100%;
padding-bottom: 50%;
visibility: hidden;
}
.content {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
margin-top: -50%;
}
http://jsfiddle.net/aG4Fs/3/
(function( $ ) {
$.fn.keepRatio = function(which) {
var $this = $(this);
var w = $this.width();
var h = $this.height();
var ratio = w/h;
$(window).resize(function() {
switch(which) {
case 'width':
var nh = $this.width() / ratio;
$this.css('height', nh + 'px');
break;
case 'height':
var nw = $this.height() * ratio;
$this.css('width', nw + 'px');
break;
}
});
}
})( jQuery );
$(document).ready(function(){
$('#foo').keepRatio('width');
});
Working example: http://jsfiddle.net/QtftX/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With