The goal is to define an aspect ratio (f.E. 4:3) for a DIV and all children of it, that have the styles WIDTH:100% and HEIGHT:100%.
This works fine, as long as I set the parent
WIDTH:100%
and then add to the first child a
PADDING-BOTTOM: 75%; // (3/4)*100
But if I resize my window to full screen on a 1080p monitor, the inner box will (sadly) correctly grow to be 100% in width and to 75% of the width, in height. Thus a 1920pixel wide div will grow to 1920x1440. On a 1080p screen this means, that I will have scrollbars to see the complete content of the div.
I'd prefer the inner box to only be (window.innerHeight / 3) * 4 wide and have a black bar on the left (and/or) right.
So I assumed that setting the height on the parent and then defining a padding-right on the child would have the same effect, but would give me the black bars on the right of the screen and not on the bottom.
But this does not work if you set the parent
HEIGHT:100%
and then add a
PADDING-RIGHT: 33% // ((4/3)-1)*100
to the children because the paddings are based on the containing elements width.
Now in a perfect world, I'd like to have my div, no matter what the height and width of the parent are, to be exactly 4:3, with black bars around it if neccessary , without ever being bigger in any dimension than the parent and thus creating scroll bars.
Is this possible with purely CSS? Or will I have to use JavaScript?
Edit:
with
<div style="width:133vmin;height:100vmin;margin-left:-66vmin;left:50%;background: #f00; overflow:hidden;">
I'm able to define a div that has 4:3 aspect ratio and has blackbars on the left and right, but if the height is not enough, it will not grow in size. Now I'd need to somehow combine both solutions...
I wrote a solution, but sadly it doesn't work with the latest stable Chrome, there is a bug filed: https://bugs.webkit.org/show_bug.cgi?id=94158
However it does work on Firefox 25.0 and Chrome Canary 36.0.1922.0
<html>
<style>
body {
margin:0;
background: #000;
}
#block1 {
display: inline-block;
position: relative;
width: 100vw;
max-width: calc(100vh * 1.33333); // (4 / 3)
}
#block1:after {
content: '';
display: block;
margin-top: 75%; // (3 / 4) * 100
}
#block2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
}
</style>
<body>
<div id="block1"><div id="block2"></div></div>
</body>
</html>
Your CSS should look like:
#block1{
position: relative;
width: 100%; /* desired width */
}
#block1:before{
content: "";
display: block;
padding-top: 75%; /* initial ratio of 1:1*/
}
#block2{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That should do it. Works cross browser back to IE8.
Comes form this great article: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 1 year ago.
Does anyone have any idea how I can get a proportional scaling, both in width and height?
I have a DIV container with the following setting:
<style>
#container {
width: 100%;
height:calc(100vw * 1.72);
background:red;
}
</style>
<div id="container"></div>
When I adjust the width of the browser window, the area scales. However, no scaling takes place when I adjust the height of the browser window.
Is there a simple CSS solution to this?
try aspect ratio
width:100%;
aspect-ratio:1;
Please keep in mind that aspect-ratio does not work with all the browsers. Visit Mozilla description about aspect ratio to see the supported browsers
You can proportionally scale an element by giving its child element a padding-top percentage value at the ratio you want. The example below has an element with a height that's 2x its parent's width.
More details on the technique here.
.container {
width: 20%; /* pick whatever width you want */
background-color:red;
}
.container .outer {
width: 100%;
padding-top: 200%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="outer">
<div class="inner">Your content</div>
</div>
</div>
I use bootstrap to create responsive layout.
Here is the jsF http://jsfiddle.net/sarit8/8vqop6dz/
I have few issues:
I try to use a script which apparently doesn't work.
In case I add the following static style I can see the squares but there are too much spaces between some of them , and page is not responsive:
.black{background-color:black; float:left; width:100%;}
.black.double{height: 490px;}
You can use just css to achieve the desired result, no js necessary,
http://jsfiddle.net/8vqop6dz/1/
.black {
padding-top: 56%;
width: 100%;
position: relative;
}
.black > * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
this works because in css margin and padding percentages are set relative to the width of an element rather than the height. so when you say the padding-top is 56%, that means 56 percent of the width of the element.
I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?
If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);
this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}
I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}
Currently I have a few navigation <nav> tags. I have place the nav tag within a container with 100% width. But when I set the container height by a certain percentage the <ul> & <li> tag in the nav when click got cut off instead of scale down. How do I go about doing it?
here's my css code;
#container
{
position: absolute;
top: 30px;
left: 50px;
width: 100%;
height: 50%;
background-color: #000000;
}
below is my source code.
http://jsfiddle.net/eMLTB/107/
Instead of
height: 50%
can you just use
min-height: 50%
as this implies that the min-height will be 50% but it will not restrict it in case container has huge content that will be more that 50% height of the container
DEMO
http://jsfiddle.net/eMLTB/109/
Percentage is applied to whatever default height the browser sets for the page.
So If by 50% you mean the #container to be 50% of the page height then you must have this as well:
html, body {
height:100%;
min-height:100%;
}
The problem I have is that the video always gets black bars on the sides or on the top/bottom depending on the screen size.
Any idea how to get it full screen always without showing that annoying black bars? and without using a plugin.
This is my markup:
<div id="full-bg">
<div class="box iframe-box" width="1280" height="800">
<iframe src="http://player.vimeo.com/video/67794477?title=0&byline=0&portrait=0&color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
#full-bg{
width: 100%;
height: 100%;
img{
display: none;
}
.iframe-box{
width: 100%;
height: 100%;
position: absolute;
background: url(../img/fittobox.png);
left: 0 !important;
top: 0 !important;
iframe{
width: 100%;
height: 100%;
}
}
}
Try adding to your CSS
.iframe-box {
max-width: 1280px; /* video width */
max-height: 720px; /* video height */
}
This means that width: 100%; height: 100% will let the element will expand as much as it can, until it hits a maximum height or width of 720px or 1280px, respectively.
If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.
Further, afaik the following is not valid CSS, are you using a library or something?
#full-bg {
.iframe-box {
foo: bar;
}
}
Edit after answer accepted: I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS
.fittobox { /* give fit to box an aspect ratio */
display: inline-block; /* let it be styled thusly */
padding: 0; /* get rid of pre-styling */
margin: 0;
width: 100%; /* take up full width available */
padding-top: 56.25%; /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
height: 0px; /* don't want it to expand beyond padding */
position: relative; /* allow for absolute positioning of child elements */
}
.fittobox > iframe {
position: absolute; /* expand to fill */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
If you know the aspect ratio of your video, you shouldn't even need Javascript. You can use a percentage-based padding-top.
I could post code, but I'd recommend you read this entire article anyway.
#Paul S. 's answer works for me for the .fittobox container for 16:9 video aspect ratios but the .fittobox > iframe embed still has black bars with his CSS. Removing the right and bottom positioning fixes it for me (no need for "px" in those 0 values, of course):
.fittobox > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}