I am trying to set the aspect ratio of a div to portrait (9:16) like this..
.ratio {
position: relative;
height: 0;
width: 100%;
background: teal;
padding-bottom: 177.77%;
}
<div class="ratio">
16:9
</div>
This is working as expected, but I am now wanting to make it so that it has a maximum height of 100% of the viewport.
I am trying to make sure it fits exactly onto the screen whilst keeping the aspect ratio and not introducing scrollbars.
What's my best approach?
You will need to use the ratio of 16/9 = 1.778 to calculate the width using calc() css function
body {
margin: 0;
}
.ratio {
position: relative;
height: 100vh;
background: teal;
width: calc(1.778 * 100vh);
margin: auto;
}
<div class="ratio">
16:9
</div>
I would recommend then using the vh unit for the height then.
height: 100vh;
Related
I found this JSFiddle which does pretty much exactly what I'm trying to accomplish - https://jsfiddle.net/q1rjg9zd/
Notice that you can resize the output frame, and the video will always fill the entire frame, without any space above/below the video to maintain the 16:9 aspect ratio.
I'm trying to get this exact same effect, except I'd like it to be done in a wrapper div, instead of filling the whole viewport. E.g. I can have a div that is 1000px in height and 500px in width and the video would behave the same as in this example.
I'm really struggling to work out how to do this, since the JSFiddle example uses vw and vh measurements, and when I try to convert those to percentages and fixed pixel measurements, the effect is lost.
* {
padding: 0;
margin: 0;
}
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
#media (min-aspect-ratio: 16/9) {
height: 56.25vw
}
#media (max-aspect-ratio: 16/9) {
width: 177.78vh
}
}
<div class="video-background">
<iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" controls=0 allowfullscreen></iframe>
</div>
Currently I'm trying to fix a div class to always be 80% of the screen size if that's possible? I don't want the div to resize when I change the size of my browser, would I be better using media queries?
.main{
width: 80%;
min-width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
You write
I don't want the div to resize when I change the size of my browser
Well, then use a fixed width in pixels:
.main{
width: 600px; /* or whatever value you wish */
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
If you always want your div to be 80% of screen size. use viewport units. vw in your case which means viewport width.
This way your div will always be 80vw out of 100vw which is the full viewport size.
See below
.main {
height:100px;
width:80vw;
background:red;
}
<div class="main"> </div>
I have a section that i want to scale using aspect ratio, but also keep it at a maximum and minimum height. Somehow the max-height property doesn't apply to this, meanwhile the min-width works just fine.
div {
background: green;
border-bottom: 2px solid red;
padding-top: 60%;
max-height: 100vh;
min-height: 450px;
box-sizing: border-box;
}
<div></div>
What i'm trying to achieve is to display content that has a fixed aspect ratio, it scales down until reaches a minimum height, but also won't exceed the viewport height when displayed in a wider browser. See attached image for explanation:
Any ideas?
Ok, if I understand correctly, you'd need to do have the height of the box linked to the width at a percentage (which I'd do by setting the height to viewport width units rather than viewport height - in my example I've set it to 75%). That way the box stays in pro when it's not being constrained by max-height or min-height.
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-color: #00ff00;
}
.box {
width: 100%;
height: 75vw;
max-height: 100vh;
min-height: 400px;
background-color: #ff0000;
}
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 :-)
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.
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%;
}
}
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
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}