I have an iframe that I want to allow to be as wide as the display requires. I have it inside of a section, and have the following in a sass file:
iframe
max-width: 100%
where the real width, otherwise is controlled by the section. Now, on very narrow displays, like a smartphone, this works fine. However, the height of the iframe goes crazy in this case. Is there a way to ensure that the height of the object cannot get become larger than it's width? That is, is there a way to access what 100% width actually is? I wish I could do something like this
iframe
max-width: 100%
max-height: max-width
Edit:
Please see here for a working example:
http://jsfiddle.net/ptzyjmb1/5/
Notice how the first embedded object is wider than square. The second is about square. and the last is taller than square. I just want some option for max-height that will result in the third object (the "tall" video) to be square. That is, I want to be able to set the width to whatever I (or the display) would like, and the height will not be allowed to exceed that value.
I do not want to enforce that height = width, just that height <= width
Use the vh and vw attributes (view-height and view-width):
iframe {
max-width: 100vw;
max-height: 100vw;
}
If, as #Anonymous pointed out, the iframe is the child of some parent element that is not 100vw across, you can just use the div's width as the width of the iframe:
div {
width: 50%
}
div iframe {
max-width: 50vw;
max-height: 50vw;
If the width of the parent div is constantly changing, there is probably some JS being used. If the width of the parent element is represented in a variable, as it should be, then JQuery can sort out the problem, as follows:
setInterval(function() {$("div iframe").css("max-width",String(divwidth)+"vw");, 10)
Related
I have a div that is set to 100% the height of my window, and a max-width of 66% of the window's width. html and body are set to 100% and overflow:none, so there's no scrolling permitted/possible.
I want to be able to scale an arbitrary <img> to fill as much as the space as possible. I'd prefer not to use background images, due to existing JS code that interacts with the <img> element.
This seems like an obvious starting point:
<img style="height:100%;max-width:66%">
But the max-width seems to come from a percentage of the browser's HEIGHT, rather than its width. And it won't keep its aspect ratio, which is definitely an undesired effect!
I could use JS to accomplish this task, but would prefer a CSS solution if there is one? It seems like it should be simple, but I have a feeling it's not...
If the img is within the div, then it's using 66% of the width of the div, which is already 66% of the width of body if I understand correctly. You can also make images resize automatically and maintain their aspect ration by setting img {width: auto; max-width: 100%;} within your CSS, leaving the height unchanged.
When setting percentage-based widths on an element, the width is typically calculated based on the width of the element's parent, which is why your image may have looked smaller than you expected.
I found an answer that I like over here:
https://stackoverflow.com/a/26648877/1058739
Quoted in case his answer disappears:
Here's a hackish solution I discovered:
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
This will enlarge the image tenfold, but restrict it to 10% of its final size - thus bounding it to the container.
Perfect for my needs, I think.
I am creating a simple portfolio webpage for an photographer. He wants to show his pictures in the web. So the images should be responsive. So I wrote following code to the image class:
img {
max-width: 75%;
height: auto;
}
So it fits the image to the width of any screen, but I want to show the image in full height. So if the image has a bigger height, the user have to scroll down to see the whole image. So how should I set the height, so the whole image whould be shown immediately?
With regards,
Andrej
did you try reversing the same, as in, try giving it a height, and leave the width to auto..!!!
Because u just need to set either of the two, and the other adjusts accordingly...
Simple:
max-height: 100%; /* or a bit less */
But note what the docs say:
The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
Ok, I have found a solution.
I just set the max-height with the vh units (viewport height).
Thx for your help.
try this way: img{max-width:100%; max-height:100%;}
In a project I am working on, I am trying to get the page's header height to be 5% of the screen. Obviously this is done with height: 5%;, however, I need the header to stay at 5% of the whole screen at ALL times. This means that if I were to shrink the browser window, the header div does NOT shrink proportionally as well. I need it to stay the same size, but the size needs to be set with the initial percentage. A website that I used for reference was github.com, as their header stays one size even when the browser window is shrunk. Flickr.com is another example of what I am looking for in a header. I have tried to use min-height: XXpx; (replacing the 'x' with numbers) but that was not effective.
Use JavaScript once the page has loaded to calculate the 5% of the window height & assign it to the header as its CSS height value. It will overwrite any set CSS values.
var h = window.innerHeight * 0.05;
getElementById('your-element-id').style.height = h+'px';
did you tryed vh(vertical height) calculation?
example
navbar{
min-height: 5vh;
max-height: xx;}
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
Would like to find a way to add a div with position fixed and max width, that should be placed either in a div with overlay or outside overlay. But the tricky part is that, when the window is scaled, I would like it to adjust per percentage....
So if I have a div with max width of 800px but when I make the browser window smaller, it should shrink. Is this possible for all browsers?
Or do I have to use a plugin for this, like jqModal? Please help. Thanks!
Just define a max-width, and then use percentages for scaling purposes:
.modal {
width: 50%;
max-width: 800px
}