This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 6 years ago.
With CSS it's possible to stretch an image and change the ratio to fully cover the parent div. The image will even resize if the parent is responsive. It is possible to do so with a video (iframe)?
EDIT: I want to make sure I won't get black bars.
EDIT: Altered title as this problem concerns a video and the duplicate answer does not.
Yes. you can give the iframe and id, and them costumise the id in your css file.
simply just type the following code:
.theid {
width : 100% ;
height : 100% ;
}
and you are done
Hmm.. Did you try to put the video on a div, and apply width=100% to the video?
Something like this:
<div class="parent">
<iframe class="child"></iframe>
</div>
And the CSS:
.parent{
width: 600px //your width here
}
.child{
width: 100%;
}
You could add width="100%" height="100%" to the iframe. doing so will make the iframe stretch the length of the parent div.
Related
This question already has answers here:
Change height on div with javascript
(4 answers)
Closed 7 years ago.
I don't know which will be needed if not all but here's my problem.
I want to make 5 div squares spanding across the page. Obviously I would make the width 20% for each but if I change the height to 20% then it won't be a square. I need a command that will find out how many pixels the width is then change the height to that number. I need it to update live. It's for an article page on my website.
Also I'm a newbie at Javascript & PHP but I'm fairly good at HTML & CSS
If you have an easier way to do this please do tell :)
Thanks for helping out a junior coder!
width = jQuery('#container div').width();
jQuery('div').css('height', width);
https://jsfiddle.net/b8aw4jbv/1/
it can be done by css only using padding-bottom:
.square{
width:20%;
padding-bottom:20%;
background-color:green;
display:inline-block;
position:relative;
}
.square .content{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
<div class="square">
<div class="content">
Lorem ipsum
</div>
</div>
its responsive, and no need to run js or load jQuery
EDIT: padding with percentage value calculate its value from parent's width so padding-bottom take 20% of parent width. .content need position:absolute and be stretched to whole div to ignore this padding and show content in it on proper place
You can do this with javascript jquery like:
$('div').each({
$(this).height($(this).width());
});
What does this code:
- it loops over the divs in your page
- it sets the height of the div to the width of the div (in pixels)
So, basically, what you want to do is having divs with an aspect ratio of 1:1.
It is possible to accomplish that with only CSS.
Here's how:
http://codepen.io/DisColow/pen/pJKZOb
I simply set all my squares to have a width and to be floating left.
Then, I add a :before pseudo element for each of those squares which has the following CSS rule:
padding-bottom: 100%;
When you specify a percentage to a padding-bottom, it's relative to the parent container width. Therefore, I simple tell my square to be as tall as it is wide.
Hope it helped.
You then can write your content inside the square-inner div.
$( "div" ).each(function() {
var divWidth = $(this).width(); // Get Width
$(this).height(divWidth); // Set height
});
I'd like to cut the bottom area of an external iframe that I want to include on my site, within this frame there are links that I cannot modify and if I click them I go to another page that has a different size from the original.
I'd like to do something like <iframe height:100%-20px /> (I know that there isn't a syntax like this but my goal is to reproduce that)
So, is there a way to hide tot pixels form the bottom of an iframe?
Take a look at the calc() function in css.
It's usable from IE10 onwards (IE9 is a bit shaky).
You can do this:
iframe{
height: calc(100% - 20px);
}
If 100% height was 100px, then it would come out as 80px (Excuse the simplicity, my math is horrible).
You can learn more by looking at this link: Uses for Calc()
Reference: CanIUse
How about this:
.outer {
width:300px;
height:290px;
overflow:hidden;
}
<div class="outer">
<iframe width="300" height="300"></iframe>
</div>
if this doesn't help do you have a link ?
You could play with the css of both the outer div and iframe with borders etc to make it look perfect
Here a live demo based on BeatAlex answer:
Demo: http://jsfiddle.net/a7y7V/
This is the generated html
<div id="largephoto" style="background-image: url(http://somepath/images/sample.jpg);">
and here is my js call
$('#loader').css('background-image','url("images/sample/gif" )');
I want the image to be like in facebook, regard too small or too large the user uploaded photo, the frame should show the center of the photo and leave no white space within the frame.
I tried $('#largephoto').css('background-image-position','center');
but it seem do nothing
Use css background-size property for fixing the image in DIV
$('#largephoto').css('background-size','100%,100%');
Try this CSS :-
.img_class {
max-width: 100%;
}
This will adjust image sucha a way that image will be cover its container.
#largephoto {
background-size:cover;
}
Using this site as an example : http://www.reebok.com/en-GB/
The header div height adjusts dependent on the size of the browser, and the inner content has 100% height & width.
Is this controlled by javascript of can this be done solely with CSS?
You can only do this with the help of html & css. Write like this:
img{
width:100%;
height:auto;
}
check this http://jsfiddle.net/e8V47/
In your page, it's actually Javascript which is used.
The height of the container is modified inline (the style attribute)
<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">
It's however possible to do a similar thing with CSS, using % in height. For example :
.module{
height:40%; // A percentage relative to the parent element
}
the image in your example is adjusting by browser, it's in , if you only set up the width or height, the browser will adjusts another automatically.
This question already has answers here:
How do I find which JavaScript is changing an element's style?
(5 answers)
Closed 10 years ago.
I'm new on a project which has a boatload of javascript classes (16-20 files) and many dynamic features. There an element which has its height and maximum height set inline from a javascript file. Is there a way to which file this is set from?
<div class="ccass" style="width: 100%; height: 67px; max-height: 67px;">
resizes to
<div class="ccass" style="width: 100%; height: 307px; max-height: 307px;">
when the window is resized. I need to disable the resizing and set a fixed height - for some of the pages at least.
Is there some developer tool that would assist with this?
If you have firefox you can check the "Break on Attribute Change" option in the HTML tab. Just right click the target element and the menu will pop up. After that, resize the window and it will break in the script line where the attribute is changed.
grep the js sources for resize or onresize event/method and go from there.