Keep the aspect ratio of a div in another div
I have a div (#outer) that is placed on the middle left side of the web browser (Chromium). Its width can change as the window is resized. The outer div has another div inside that I want to resize with a fixed aspect ratio (16: 9), always staying within the borders of the outer div.
For example, if the outer div is resized to be tall and thin, the inner div must fit the full width of the outer div while maintaining a proportional height. If the outer div is resized to be short and wide, the inner div must fit the full height of the outer div with proportional width. The inner div should not stretch beyond the outer borders of the div, and there should be no scrollbars.
Basically, I want to accomplish what was suggested here , but contained in another dynamically resizing div, not just the viewport. I tried using viewport vw and vh but didn't get it to work in a div. I am currently using a before element with padding-top: 56.25%, which only works in relation to the width of the outer div and overflows the outer div if the width is much greater than the height.
Ideally, I would like to use pure CSS, but I am willing to write javascript if there is no alternative. Any ideas? Thank!
Relevant HTML:
<div id="outer">
<div class="box"><div id="camera_view"></div></div>
</div>
Relevant CSS:
Using the before element:
.box {
position:relative;
width: 100%;
height: 100%;
}
.box:before {
content: "";
display: block;
padding-top: 56.25%;
background: #A2E8A7;
}
.box-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#outer {
display: flex;
position: relative;
width: 100%;
align-items: center;
}
Using View Units: (edit: this is as a separate test file)
.box {
width: 100vw;
height: 56.25vw;
background: #FF8AB1;
max-height: 100vh;
max-width: 177.78vh;
margin: auto;
position: absolute;
left:0;right:0;
}
#outer {
width: 50%;
height: 50%;
/* edit: 50% only used to mimic the approximate size of #outer */
}
.box-content {
background: #FF8AB1;
}
source to share
I know you really need a pure CSS solution and I really hope someone gives you a css solution, the big problem is to set the width in the parent height function, see my question here Setting width based on height parent object .
Here's a solution using js:
function setAspectRatio(){
var outer = $('#outer');
var box = $('.box');
if (outer.height() > outer.width() * 0.5625) {
box.css({'width': '100%'});
box.css({'height': box.width() * 0.5625});
} else {
box.css({'height': '100%'});
box.css({'width': box.height() / 0.5625});
}
}
$(document).ready(function() {
setAspectRatio();
$(window).resize(function() {
setAspectRatio();
})
})
.box {
position:relative;
background: #A2E8A7;
margin: 0px auto;
}
.box-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#outer {
display: flex;
position: relative;
width: 100%;
height: 60vh;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div class="box">
<div id="camera_view"></div>
</div>
</div>
Here's a jsfiddle to reproduce from
I hope this helps you
source to share
I am trying to recreate your layout where you say you have it on the side and when it shrinks too much it overflows. I cannot reproduce this effect. Using the link here: Maintain the aspect ratio of the div with CSS , I was able to get everything to work just fine as far as I can tell. Can you bootply or dabblet to reproduce the problems if below doesn't work?
Here's the CodePen link for below.
<!doctype html>
<html>
<head>
<style type='text/css'>
html, body {
height: 100%;
width: 100%;
position: relative;
}
#container { width:100%;height:100%;min-width:480px; }
#outer_wrapper {
width:100%;
height:100%;
margin:0 auto;
}
#outer {
position: relative;
width: 100%;
align-items: center;
background: black;
padding-bottom: 56.25%;
margin: 0 auto;
}
.box {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background: #83E1D1;
}
#topbar { height:26px;background-color:#600; }
#bottombar { height:20px;background-color:#006; }
#content_wrapper {
width:100%;height:100%;
}
#content_left {
width:auto;
margin-right:280px;
}
#info { background-color:#006;color:white;}
#content_right {
float:right;
width: 280px;
height:100%;
background: #d43b89;
}
#bottombar {
position:fixed;bottom:0;left:0;right:0;height:20px;background:#000;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div id="title"><a href="/">Lorem Ipsum</a></div>
</div>
<div id="content_wrapper">
<div id="content_right">
</div>
<div id="content_left">
<div id='outer_wrapper'>
<div id='outer'>
<div class='box'>
<div id="camera_view">Hello World</div>
</div>
</div>
</div>
<div id='info'>Info below camera view</div>
</div>
</div>
<div id="bottombar">
</div>
</div>
</body>
</html>
UPDATE
Since you need to STOP at a certain size (because the height is fixed for the outer area) and not increase, you need to determine at what height you need to stop, then do #outer-wrapper
what I created in my example to stop at max-width
and max-height
. I've updated Code Pen to work like this:
http://codepen.io/anon/pen/XbEebm
UPDATE 2 I've updated the above CodePen ( here ) to look more like your layout. This is about how much I can help you. My opinion is to avoid absolutes if there is absolutely no way to avoid them ... they don't respect the position of other tags ... so first of all what I did was to mock up your example with absolutely no exceptions parts of the camera view.
You may also notice that I put the min-width in the #container to prevent 16/9 from being too small ... you can change the min-width a bit, but you will probably need one to prevent overflowing from within that area when it gets too small.
source to share