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>
Related
What I am trying to do should be simple. But somehow I am not able to find an answer to it.
Here is my codepen:
https://codepen.io/mvsimple/pen/wvgbvgQ
HTML:
<div class="parent">
<iframe class="child" src="https://reesgargi.com/"></iframe>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.5%;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
I want the iframe to fit inside the div (so that its width = parent div width)
But iframe loads the page zoomed in, from the center.
I have tried using CSS (Flexbox, Table display, and W3S trick
But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)
Please advise my fellow programmers.
Finally found a solution!
All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).
.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}
This question already has answers here:
Rotated elements in CSS that affect their parent's height correctly
(7 answers)
Closed 4 years ago.
Below I have two divs, one that grows to assume its child's height, and the other where, because of a css transform, the parent's height does not adjust. Does anyone know why the second div's height doesn't adjust, and if there is a solution to this problem that doesn't involve changing the height of the parent with javascript?
.container {
background-color: blue;
position: relative;
margin-bottom: 200px;
}
.child {
background-color: red;
width:500px;
height:100px;
position: relative;
left: 30%;
}
.b > .child {
transform: rotate(-90deg);
}
Container's height grows to fit child element:
<div class="container a">
<div class="child"></div>
</div>
Container's height does not adjust to fit rotated element:
<div class="container b">
<div class="child"></div>
</div>
You changed with the rotate child element. And height and width will behavior different.
Could you try this code, maybe it will help.
.b > .child { transform: rotate(-90deg); width: 100px; }
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I'm trying to make page with normal div #header and scrollable div #content, so my #content fill all the height left from the #header, even if #header changes his own height.
I tried several options and that is this is my last one http://jsfiddle.net/C4wEg/. But the flaw of this option is that I need to change top property of #content (utilize JavaScript) if height of the #header changes.
Is there any solution to achive my goals only with css?
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
#header {
background-color: tan;
}
#content {
overflow: auto;
background-color: teal;
position: absolute;
bottom: 0;
top: 20px;
}
<div id="header">
Test header
</div>
<div id="content">
Test content
</div>
Since css ignores the dimensions of absolute/fixed objects (those are out-of-flow as far as their neighbours are concerned), you can use media queries to emulate dynamic height behaviour:
#media only screen and ( max-width: 700px ) {
#header {
height: 40px;
}
#content {
padding-top: 40px;
}
}
http://jsfiddle.net/2RTFW/ (resize the width of display area to see the effect).
If you are using SASS, then you can easily generate such media queries, even in 10px increments, if you wish (use "for" loop).
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
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%;
}