In my HTML code, I'm setting my Iframe width value to 95% of the width. I want the height to dynamically resize according to the set aspect ratio. I have made a javascript script to try the dynamically resizing but when i run my HTML it doesn't resize the height.
Here is my html for the iframe:
<div class="video">
<tr>
<td>
<iframe src="https://embed.theguardian.com/embed/video/news/video/2016/dec/27/cassetteboy-remix-the-news-2016-review-special-video" scrolling="no" onload="resizeiframe(this);" allowfullscreen></iframe>
</td>
</tr>
</div>
Here is my css:
.video {
}
.video iframe {
align: center;
width: 95%;
margin-top: 180px;
float: top;
position: relative;
}
and here is my javascript:
<script>
//this is javascript
//it is used to dynamically resize the height of the iframes based on screen width
function resizeiframe(object) {
//assign the aspect ratio to a variable
private float aspectratio = (6/19);
//set the objects height to the object's width multiplied by the aspect ratio
object.style.height = (object.style.width * aspectratio);
}
</script>
Can anyone help?
Two Solutions
First, you had a few issues with your original JS:
You were not getting the width of the iframe correctly (use element.offsetWidth or the like)
You need to assign the unit when setting a width (px, etc.)
You were typing aspectratio incorrectly as private float instead of var or private aspectratio: number; (Typescript) -- unless you are using another superset JS language and it wasn't tagged in the question.
JavaScript: (Modification to your original)
function resizeiframe(object) {
//assign the aspect ratio to a variable
var aspectratio = (6/19);
//set the objects height to the object's width multiplied by the aspect ratio
object.style.height = (object.offsetWidth * aspectratio) + "px";
}
// This is just quick and dirty to grab the element -- do something better
resizeiframe(document.getElementsByTagName("iframe")[0]);
Working Plnkr
Doing this via JavaScript may also require that you call resizeiframe on window.resize to compensate for user's resizing of the browser window.
OR
This can also be accomplished with a CSS-Only solution (no JavaScript needed), if you're not against using vw (viewport width units) instead of px (pixels).
CSS:
iframe {
width: 95vw;
height: calc(95vw*(6/19));
}
HTML
<iframe src="https://embed.theguardian.com/embed/video/news/video/2016/dec/27/cassetteboy-remix-the-news-2016-review-special-video" scrolling="no" onload="resizeiframe(this);" allowfullscreen></iframe>
Working Plnkr
With this solution, browser resizing is handled automagically.
Note: In both solutions, I removed .video wrapper element to simplify the answer, but this can be easily added back.
You should add px.
object.style.height = (object.style.width * aspectratio) + "px";
Related
I know that width and height property of HTML images can be set simply by <img src="Debian.jpg" style="height: 120px; width: 130px">.
What I am looking for is if there exists a single CSS property that takes only one value in % and scales the width and height of the original image according to that percentage. For example, if the height and width of Debian.jpg are 1000x700 and I specify 50% in that CSS property then the image scales down to 500x350 and hence the aspect ratio is maintained.
It's very hard for me to maintain the aspect ratio of the image while adjusting the height and width separately. If a property like that does not exist then is there any way to maintain the aspect ratio and achieve desirable dimensions of the image?
Yes, there is a way to maintain the image's aspect ratio and resize the image to a fraction of its original size. However, CSS cannot know the intrinsic size (the original size) of the image. Therefore, you can only do two things:
Tell the CSS explicitly the original size
Use JS to get the original size upon image load
What doesn't work
Using percentage value as the width value for img doesn't work simply because percentage value resolves to, well, a percentage of its container size, not its original size. Below, I demonstrated the not-working examples.
That being said, I personally usually want to specify the width of the image explicitly. For example, on large devices, I want the image to be 1080px. On smaller devices, I want the image to be 560px. I can simply make a container for the image of an explicit size, place the image inside the container, and specify the image's width to 100% (of its container size).
What works
As mentioned, there are two ways to make an image 50% of its original width. First, using JS. Second, tell the CSS explicitly the original image width.
Using the JS approach, you simply need to change the width of the image. Upon load, get the intrinsic width of the image, then set the new width to the intrinsic width divided by 2. Simple.
Using the telling-CSS-explicitly approach is less advantageous. This solution presumes that the image will always be the same and needs you, the developer, to know the original image size beforehand. When you change the original image size, you will also need to update your code. That being said, you can achieve this by specifying a CSS custom property inside the CSS class, specifying an attribute (in HTML) that gives the intrinsic width then using attr() (still experimental and mostly not supported), or using an intrinsicsize attribute and set the width and style through CSS (still experimental and not supported). The last two solutions, as mentioned, are not supported by most browsers and may not work properly yet.
In my opinion, your best bet to set an image's width to 50% its intrinsic width is by using JS. Here's a solution demonstrating the what-doesn't-work solutions and the JS solution. Aspect ratio is automatically maintained if you only change one of the image's size (width/height).
const imageJS = document.querySelector('.image--changed-with-js')
imageJS.onload = () => {
const intrinsicWidth = imageJS.width
imageJS.width = imageJS.width / 2
}
* {
box-sizing: border-box;
}
body,
html {
margin: 0px;
}
img {
margin: 20px 0;
}
/* Image has its intrinsic size (i.e. the original image size) */
.image--original {
width: auto;
}
/* Image contained within a 500px container
Image has a width of 50% of 500px = 250px */
.container {
width: 500px;
}
.image--changed-with-container {
width: 50%;
}
/* Image is not contained within a div
However, image is inside body
<body> is its container
It now has a width of 50% of the body
NOT 50% of its intrinsic width */
.image--changed-without-container {
width: 50%;
}
/* Image changed using JS
You can get the intrinsic size through JS and modify its size there */
.image--changed-with-js {}
<img class="image--original" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
<div class="container">
<img class="image--changed-with-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
</div>
<img class="image--changed-without-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
<img class="image--changed-with-js" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
If you set the width to a fixed number of pixels, e.g. img { width: 500px; }, the height will adjust accordingly to maintain the same aspect ratio. If you set the height, the width will adjust accordingly to maintain the same aspect ratio.
If you set the width to a percentage, e.g. img { width: 50% }, the browser will assume you mean a percentage of the element's container. The height will adjust accordingly to maintain the same aspect ratio.
However, if you set the height to a percentage, e.g. img { height: 50% }, that just won't work for various reasons.
The solution is really simple. To preserve the aspect ratio, all you need to do is set the height and width CSS properties like:
#theImage {
width: 100%;
height: auto;
}
<img id="theImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
By setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained. The end result is an image that scales up or down perfectly.
The downside of this solution is that a single image cannot effectively display across the range of resolutions on which your content may be viewed. For a more comprehensive solution, you need to bring in media queries and images of varying sizes to replace a lower resolution image when the time is right
My suugestion is to remove the specified sizes you put. Yes there is a code that can be specified in css.
in html do like that:
<img src="Debian.jpg" alt="Debian Image" class="myCustomImages">
in css do something like that:
.myCustomImages {
max-width: 50%;
max-height: 50%;
}
So as I understand, You want to keep the image aspect-ratio while defining it's scale in percentage of the original size. Below is my suggestion:
When the image is inside a container with display: inline-block, you can define a width for an image in css, and it will be relative to itself (if the parent have display: block it will be relative to it's parent, if it's display:inline it will be relative to the nearest block parent).
When you define one of the dimentions (width or height) and not the other, by default it's keep the aspect ratio.
So what I suggest to do is wrap the image in an inline-block parent, and define only width in a percentage. like this:
div {
display: inline-block;
}
#half {
width: 50%;
}
#original {
width: 100%;
}
#big {
width: 150%;
}
<h1>Image 400X267</h1>
<h3>50% size</h3>
<div>
<img id="half" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>100% size</h3>
<div>
<img id="original" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>150% size</h3>
<div>
<img id="big" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
I'm trying a more fluid design.
I want specific divs to be a percentage of the overall body. I also want to set fluid / liquid padding within each div.
<body>
<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>
</body>
CSS:
body {
margin-top: 85px;
min-height: 100%;
}
.image {
content: image_url('something.jpg');
width: 100%;
height: auto;
}
/*I'm assuming the padding I'm setting is a percentage of the .fourty
div not the overall body. Granted, width is 100%.*/
.fourty{
padding: 4% 8%;
min-height: 40%;
width: 100%;
}
.sixty{
padding: 4% 8%;
min-height: 60%;
width: 100%;
}
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
How do I correct / achieve this? I'm open to a JS solution, but would be more interested as to how to accomplish this in CSS.
As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.
CSS does, however, offer you options to style an element's heights to a certain percentage of the viewport height (using VH units), but since this does not achieve your goal, I'll leave you with a javascript answer that does.
Relevant javascript functions:
function getDocumentHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};
function setDivHeight(target, percentage) {
var desiredHeight = getDocumentHeight() * (percentage/100)
target.style.height = desiredHeight + 'px';
};
To set the height initially and on viewport resizes:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
That is correct. The reason is that your code is in violation of the spec.
From the W3C height property definition:
percentage Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you're going to use percentage values, you'll need to use the height property from top to bottom.
From the browser's perspective, min-height (and max-height) don't adhere to this rule and, therefore, as the spec says, they compute to auto.
DEMO (with your code, revised)
Read more here: Working with the CSS height property and percentage values
As an aside, I think its safe to say that the height definition is thoroughly obsolete. It hasn't been updated since 1998 (CSS2) and there are many ways for establishing the height of a box. Confining percentage heights to only the height property doesn't make much sense anymore.
Firefox seems to agree. Recent versions now accept flex heights, as well. See examples here:
Height is not correct in flexbox items in Chrome
Chrome / Safari not filling 100% height of flex parent
Flexbox in Chrome--How to limit size of nested elements?
I have an iframe embedded in a third party website, which I cannot edit in any way.
I want the iframe to re-size according to the width of the window.
If I was able to edit the whole page, this would not be a problem.
However, when setting the size of an element in %, it uses the parent of that element to size from. In the case of the page I am working with, the parent elements do not re-size, so this does not work.
What I need, is a way of telling the iframe to re size, based solely on the width of the window, and preferably using only CSS.
Is this possible using only CSS? If not is it possible using JQuery or JavaScript?
Try this:
http://jsfiddle.net/6aLxaag8/2/
This jsfiddle loads a second jsfiddle in the iframe.
There's a hardcoded style attribute on the IFrame that sets the width; 100vw or 100% of the width of the viewing window in which the element sits, regardless of it's position in the DOM. As you don't have access to the parent page you'll need to use a style attribute and you may not be able to use javascript to add it (check cross site scripting).
Support isn't perfect with vw units, but it's close.
PS, it's hard to know if this will work without trying it in your context, please let me know :-)
I have encountered that problem before and I use this css trick, this adjust to the width & height of any wrapper/div so if you have embed an iframe inside a div with 'height: 620px' and 'width: 420px' the iframe size adjust to the div's height and width. Just change both width & height of the div to 100% percent.
.content_here {
width: 420px;
height: 620px;
}
iframe#iframecontent {
display:block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
<div class="content_here">
<iframe id="iframecontent" src="http://www.bootstrapcdn.com/" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>
</div>
I encountered small problem with Height of embedded object in html.
I want to set the height and with of the object as per height and width of the browser. I am using following code Width sets properly but when i am trying to set height 100% it will not.
<object type="application/x-shockwave-flash" data="book.swf" width=100% height=100%>
it is working properly for width but not for height.
Is there any possible solution?
You need to set e.g.
html, body { height: 100%; }
Otherwise, there’s really nothing that the percentage in setting the height of the object would relate to. You may also wish to set
html, body { margin: 0; padding: 0; }
Try to write the actual Values of the width and height instead of procents for example :
<object type="application/x-shockwave-flash" data="../Desktop/final.swf" width="349" height="171">
Updated due to comment
If you want full browser size try this links:
http://www.kirupa.com/developer/mx2004/fullscreen.htm
http://www.webdesign.org/flash-swish/flash-tutorials/making-flash-taking-the-size-of-browser.15847.html
height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.
'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}
So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}
No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
#contentDiv {
height: 100vh;
}
With jQuery, you could use:
$('div.class').css('height', $(window).height()+'px');
Pure css
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
Or javacript Jquery:
Ready (not innerHeight in ie8):
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}
My answer builds on jonwayne's because there wasn't much explanation.
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});
I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.