I'm trying to keep the iframe proportions always the same, despite the viewport. As long as the code below works for block units, the iframe simply does not display any content (I guess it's because the height is set to 0). How can I keep the proportions 4:3 (100% : 75%) for Iframe? I don't want to use any jquery, just simple css.
iframe {
width: 100%;
height: 0;
padding-bottom: 75%;
}
OK, I found a way around. I wrapped the iframe inside the div and applied this code:
div {
width: 100%;
height: 0;
padding-bottom: 75%;
position:relative;
}
div iframe{
width: 100%;
height: 100%;
position:absolute;
}
Use in CSS:
For 1:1 proportion:
iframe {
width: 40vw; height: 40vw; }
For X:Y proportion:
iframe {
width: 40vw; height: calc(40vw * X / Y); }
* Any width other than 40vw can be chosen.
Related
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
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.sized {
height: 100%;
position: relative;
background: #eee;
overflow:hidden;
padding:0;
}
.sized iframe {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#media (min-width: 320px) {
height: 200%;
top: -50%;
}
#media (min-width: 640px) {
height: 180%;
top: -40%;
}
<div class="sized">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<h3>Original video</h3>
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
As I get a cookies same origin error in the snippets result, here is a mirror:
https://jsfiddle.net/07Lffw5x/2/embedded/result/
[edit] Maybe this is a better demo, if you compare to this one, there is not much difference... why? [/edit]
I'm trying to reproduce a background-size cover for an iframe.
The thing is that it seems to rescale the video, for bigger sizes only,
Question,
Can the rescales take effect on every breakpoint? or the vimeo player might rescale by it's own anyway?
Similar to Alvaro Menendez's answer, credit needs to go to this answer stackoverflow.com/a/29997746/3400962 by Qwertman. I got as far as using the "padding percentage" trick, but this answer's clever use of viewport units is crucial to this working.
The key to implementing this behaviour is to ensure two things:
That the iframe always maintains the same aspect ratio as its video content 16 : 9. This will ensure that no black "padding" is present around the outside of the video
That the iframe always fills the height or width depending on the size of the viewport
One way to maintain the aspect ratio of an element is to use the "padding percentage" trick which takes advantage of the fact that top and bottom padding uses the width of the element as the basis for their value. Using the formula B / (A / 100) = C% we can calculate the required percentage for the padding. Given the video has a 16 : 9 ratio this translates to 9 / (16 / 100) = 56.25.
The only problem is that in your case the calculation is required for both the horizontal and vertical axis (as we don't know what dimensions the viewport will be) and this trick will not work with left and right padding to get the aspect ratio in relation to the height.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
.inner {
left: 50%;
min-height: 43.75%;
padding-top: 56.25%;
position:absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container iframe {
bottom: 0;
height: 100%;
left: 0;
position:absolute;
right: 0;
top: 0;
width: 100%;
}
<div class="container">
<div class="inner">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
https://jsfiddle.net/w45nwprn/ (Snippet doesn't show video, please see fiddle)
Luckily, in your case you want the video to fit the entire screen so viewport units can be used to calculate the aspect ratio instead of percentages. This allows use to calculate the width in relation to the height and vica versa:
left: 50%;, top: 50%; and transform: translate(-50%, -50%); are required to center the iframe in .container
min-height: 100%; and min-width: 100%; are required to ensure that the height and width are never smaller than that of .container
height: 56.25vw; will set the height in relation to the width of the viewport. This is calculated by doing 9 / (16 / 100) = 56.25
width: 177.77777778vh; will set the width in relation to the height of the viewport. This is calculated by doing 16 / (9 / 100) = 177.77777778
Because the height and width can never be below 100% but the must remain in the correct aspect ratio the video will always cover the whole viewport.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
<div class="container">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
https://jsfiddle.net/qk00ehdr/ (Snippet doesn't show video, please see fiddle)
Viewport units are widely supported, so as long as you are not targeting old browsers this method should work.
Ok. The merit is NOT mine as I got the jquery here
I remembered that question as I used it on one of my old projects and I wanted to check if it would work the same with an iframe. It does.
basically with this css:
.container {
position: absolute;
top: 0;
overflow: hidden;
}
and this jquery:
var min_w = 300; // minimum video width allowed
var vid_w_orig; // original video dimensions
var vid_h_orig;
jQuery(function() { // runs after DOM has loaded
vid_w_orig = parseInt(jQuery('iframe').attr('width'));
vid_h_orig = parseInt(jQuery('iframe').attr('height'));
jQuery(window).resize(function () { resizeToCover(); });
jQuery(window).trigger('resize');
});
function resizeToCover() {
// set the video viewport to the window size
jQuery('.container').width(jQuery(window).width());
jQuery('.container').height(jQuery(window).height());
// use largest scale factor of horizontal/vertical
var scale_h = jQuery(window).width() / vid_w_orig;
var scale_v = jQuery(window).height() / vid_h_orig;
var scale = scale_h > scale_v ? scale_h : scale_v;
// don't allow scaled width < minimum video width
if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};
// now scale the video
jQuery('iframe').width(scale * vid_w_orig);
jQuery('iframe').height(scale * vid_h_orig);
// and center it by scrolling the video viewport
jQuery('.container').scrollLeft((jQuery('iframe').width() - jQuery(window).width()) / 2);
jQuery('.container').scrollTop((jQuery('iframe').height() - jQuery(window).height()) / 2);
};
You get this: JSFIDDLE
(I know you were looking for a pure css solution, which I don't think it's possible but I can be wrong, but I have posted this answer because it could help other people with same issue)
I'm looking for a way to keep a modal dialog within screen bounds, i.e. that its height is always less than the screen height and the width is adjusted accordingly. I tried:
.modal-dialog {
max-height: 100%;
}
but this doesn't seem to have any effect.
http://jsfiddle.net/ma4zn5gv/
An illustration:
I prefer a pure CSS solution (no js) if it exists. For clarity, I'm looking for max-height, not height (i.e. is the modal is no taller than screen, leave it as is).
Use viewport units with calc. Like this:
.img-responsive {
max-height: calc(100vh - 225px);
}
...where the 225px corresponds to the combined height of the top and bottom sections of the viewport which surround the dialog.
Also, in order to take care of the width of the modal we need to set a few more properties:
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Updated Fiddle (Resize the viewport height to see the effect)
Alternatively:
We can replace calc with a padding + negative margin technique like so:
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
FIDDLE
PS: browser support for viewport units is very good
Target the modal-body and not the modal-dialog.
Add the following to your CSS:
max-height: 80vh;
overflow-y: auto;
It should look like this:
.modal-body {
max-height: 80vh; overflow-y: auto;
}
Adjust the VH height to preference.
Script
$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});
Fiddle
Since the default value set to auto and 100% in width and height. you just be able to modify; the image inside the viewport and the target ID, as follows:
/*let target has the same value as modal-dialog*/
#myModal {
width:auto;
height:auto;
margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
width:70%;
height:70%;
margin:0 auto;
}
Here's the DEMO in jsfiddle.
You also can separate it into, as follows:
.modal-dialog img {
width:100%;
height:100%;
margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
width:60%;
height:60%;
margin:0 auto;
}
UPDATED DEMO:
If you ensure that the parent elements have a height set, then you should be able to do it pretty easily. I have given the header and footer 10 percent heights hear and the body 80 percent so that it all adds up to 100 :)
.modal, .modal-dialog, .modal-content{
height: 100%;
}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
max-height:100%;
}
Fix the container size first, then set modal-dialog size.
For example:
.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}
Fiddle
If you provide max-height and max-width to 100% then it will take automatically accordingly screen but as you want this dialog size smaller then you will have to set max-height and max-width to some fix value.
As you have already used responsive model dialog so it will change dialog size automatically as per your screen size.
Try following css it may work as per your requirement. you can change max-height and max-width accordingly, margin-left and margin-right used for center align.
.modal-dialog {
max-height: 225px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
Hope it may help you.!!
Try working Fiddle with some css changes.
css:
.modal-dialog {
height: 100%;
margin: 0;
padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I think you should use overflow: hidden on .modal-dialog, with a style to mantain the image proportion.
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;
}
Redesigning my website, in my CSS I have a div of height: 200px; then an image under it with a height: 532px; then lastly a div of height: 100%;.
The last div is not filling the rest of the page, is there something I'm doing wrong?
P.S. - All divs are in a container. All containing divs have height: 100%;
I have since changed it, so I no longer require this.
First, you need to set the height of html and body to 100%.
Then if you want to cover the rest of the page with that div you should do something like:
div{
height: -moz-calc(100% - 732px); //732 = 200 + 532
height: -webkit-calc(100% - 732px);
height: calc(100% - 732px);
}
Hope this will help....
You really need to post your html.
I suspect that the problem you are having though could be solved by setting the height of the html and body tags to be 100% too. Like :
html, body{
height:100%;
}
If the div did indeed obey the height: 100%, it would have the same height as the container, conflicting with the elements above it.
Without using Javascript to compute the height, or note widely supported modern CSS extensions, you must fall back to absolute positioning. The only down side is you must manually enter the top of it.
http://jsfiddle.net/NnD2u/
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
.
.container { height: 500px; background-color: Yellow; }
.child1 { height: 200px; background-color: Green; }
.child2 { background-color: Red; }
.container { position: relative; }
.child2 { position: absolute; bottom: 0; left: 0; top: 200px; right: 0px; }