Parent div is absolute, child div contains iframe. I want iframe to expand. I have managed to achieve this by setting child to fixed position.
However, what is causing a problem is that I have some transform translate on parent div and this causes iframe to loose width again. I cannot modify or remove this translate which is complicated (like transform: translate(836.152px, 253.619px) translateZ(9999px) rotate(0deg))
Demo here:
http://jsfiddle.net/5bk6dn7y/1/
Everything works well if you remove translate, but again I cannot modify or remove this.
One fix it to add:
iframe {
width: 1000%;
}
but this is not a solution because on small screen, it will not automatically shrink to max screen width.
Full code, use jsfiddle instead because this snippet wont play youtube in iframe.
#a {
position: absolute;
background: red;
top: 50px;
transform:translateX(10px);
}
#b {
position: fixed;
width: 100%;
background: blue;
max-width: 400px;
}
iframe {
width: 100%;
height: 200px;
}
<div id="a">
<div id="b">
<iframe src="https://www.youtube.com/embed/Yx7mIu2qspw?autoplay=1" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen=""></iframe>
</div>
</div>
Related
Whilst trying to make an image fit into a rectangle, I came across a weird problem and wondered if anyone knew why these three ways of using object fit act differently:
.container {
width: 250px;
padding-top: 20%;
border: 1px solid red;
position: relative;
display:inline-block
}
.container>img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
}
.image {
width: 100%;
height: 100%;
}
.image-1 {
right: 0;
bottom: 0;
}
.image-2 {
right: 0;
bottom: 0;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-1">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-2">
</div>
As you can see from the first image - everything works fine with a width and height. In the second image, I try to set the image so it fills the space with absolute positioning instead of width and height, but this is totally ignored and the image just overflows or stays it's original size.
To fix this, I use a max-width and height on the third image, but then this totally ignores the object-position and doesn't grow to a width or height larger than itself.
Why does object fit only work with a declared width and height and not if the image is just taking up space with coordinates and why does object-position not work with max-width and height?
The image is a replaced element so the use of top/left/right/bottom will not work like it will do with a non-replaced element (a simple div for example). Here is the relevant parts from the specification:
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
To make it easier the computed height/width of your image aren't defined by the top/bottom and right/left values but it's using the default one of the image thus there is no ratio distortion and object-fit will do nothing.
Use different value for bottom/right and you will see that they are ignored:
.container {
width: 250px;
padding-top: 20%;
border: 1px solid red;
position: relative;
display:inline-block
}
.container>img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
}
.image-1 {
right: 0;
bottom: 0;
}
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" >
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:100px;bottom:10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-10px;bottom:-10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-100px;bottom:50%">
</div>
Basically the top/left are simply adjusting the position and the intrinsic size of the image are used. If you explicitely specify the width/height or you add max-width/max-height constraint then you will be able to change the computed height/width like you already did.
Related question where the same happen with an input element: Width of absolute positioned input doesn't follow CSS rules
In your situation object-fit is only working for the first case where we have ratio distortion since you set height:100% and width:100%. Nothing will happen on the second case (like explained above) and also for the third case since you simply defined max-height/max-width thus the image will simply follow this constraint and will try to keep it's initial ratio.
In other words, object-fit will only work if you change the width AND the height AND this change break the initial ratio. Changing only one of them or none of them make the use of object-fit useless.
Related questions:
CSS object-fit: contain; is keeping original image width in layout
How does object-fit work with canvas element?
I'm trying to make iframe responsive inside div, there are plenty of resources on the web on how to do this, but the common solution is not working for my case for YouTube video embeds.
I'm using Skeleton CSS Boilerplate. I have a nested div structure like so:
<div class="container">
<div class="row item">
<div class="six columns">
<iframe> </iframe>
</div>
<div class="six columns">
<iframe> </iframe>
</div>
</div>
</div>
The iframe were protruding outside the right edge of the containing div (class .six.columns) so I tried the following two css strategies (below).
However, with each of these strategies, <iframe> have become huge, and seem to have taken on the width of the .container div (or perhaps the .row div), instead of the immediate parent, the .six.columns div.
div > iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
and
div.six.columns iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I just want the <iframe> to responsively fit inside the .six.columns div. How can I achieve this?
Set the container to position:relative in order to have the absolute to work.
To maintain the video aspect ratio, wrap the iframe into another div, and use the padding trick. Let's say the video is 16:9, the padding-bottom value would be 9/16=56.25%. Simple demo follows.
https://jsfiddle.net/dfkhkLhp/
.youtube {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="youtube">
<iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
I have a HTML5 audio player in a div. I have set its width to 100%. I wanted to fix the player at the top when scrolled so I fixed it's position. The problem is when I do that, the player width overflows the container.
Below is my code.
HTML
<div id="container">
<audio arc="#" controls></audio>
</div>
CSS
#container {
width : 350px;
height: 300px;
background: #BADA55;
}
audio {
width: 100%;
/*position: fixed;*/
}
I created a fiddle to demonstrate the issue. Its currently in the state which I want it to look like. Un-comment the position: fixed; to see the problem.
Can anyone please tell me what I should do to make it stay fixed with the correct width?
Thanks
You can try with
width:inherit;
http://jsfiddle.net/vfQ5K/2/
Need to wrap the audio element and apply the css to the wrapper. I updated your jsfiddle.
<div id="container">
<div class="audioWrap">
<audio arc="#" controls></audio>
</div>
</div>
Then CSS:
#container {
width : 350px;
height: 300px;
background: #BADA55;
position: relative;
}
.audioWrap {
width: 100%;
position: fixed;
}
Note, if you are fixing it's position inside the container, you may want to add 'position: relative' to the container. I went ahead and added that to the jsfiddle.
Please Help me to center the message box on fit on any screen resolution..
can you show what css or style, margins, left, right,that I can use?
Center Horizontally
To center a div horizontally you can use margin: auto auto; width: 500px where the width is any width you want it to be.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: auto auto;
background-color: #CCC;
}
Center screen with fixed dimensions
If you can fix the content height and width then it's possible to center the div both horizontally and vertically using just css. This is achieved by wrapping your content in another div, then positioning your content div's top: 50% and then subtracting half the height of it's margin from it: margin-top: -100px, assuming the height was 200px. See example below:
JS Fiddle.
HTML:
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
CSS:
#wrapper {
position: relative;
background-color: #EEE;
width: 200px;
height: 200px;
font-size: 10px;
}
#content {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
background-color: #DDD;
}
Pretend it's vertically centered
Also you can give a fixed margin-top (or top with position: absolute) to make it seem vertically centered in most desktop and laptop screens.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: 100px auto;
background-color: #CCC;
}
Use Javascript
It is not possible to vertically center content with arbitrary height using just css. In this case you will need to use Javascript to position the div.:
The basic idea is:
you calculate the height of the content at the time you need to show the content, or when the content is loaded.
Then change any of the many css properties to position the div at the vertical center.
My personal preference is you to use position: absolute with top property. You can also use margin-top but you probably don't want this div to take up space in the box model if you have other content on the page.
JS Fiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var el = $('#content');
var elWidth = el.width();
var elHeight = el.height();
el.css({
position: 'absolute',
top: (windowHeight / 2) - (elHeight / 2),
left: (windowWidth / 2) - (elWidth / 2),
});
});
</script>
<style>
#content {
width: 200px;
height: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
Some content
</div>
</body>
</html>
Use any of the many Javascript "plugins" available
There is a multitude of CSS frameworks around the web that provide boilerplate CSS that we use on most websites. And some of these also help with these kind of common presentation issues with small Javascript plugins. Personally I know that Twitter Bootstrap provides a Modal plugin which you can use for this purpose. There is also many jQuery plugins for the sole purpose of centering content in a page.
Conclusion
Although there is a multitude of options to achieve this, I it sad to see that CSS still does not support doing this. Maybe it's a hard thing to do across different scenarios, I don't know. From the options that I mention above, I think the Javascript option is the most versatile, and with todays browser speeds, and the likeliness that nobody would have Javascript disabled on their browser, this would be the best way to go.
I just saw this after reading about how to do one on a CSS Techniques page.
Basically, define a little CSS:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
ADVANTAGES:
Cross-browser (including IE8-10)
No special markup, minimal styles
Responsive with percentages and min-/max-
Use one class to center any content
I have not had time to test it out, but I wanted to post it up here in the hope that it helps others.
Here is what you are searching for http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/
You can easily make it with jquery! Or with an css solution given on this site!
You should give us your code that you have tried. Assume that you have HTML code like below:
<div id="message">
Hello World!
</div>
CSS code:
#message {
width: 100px;
height: 100px;
margin: 50px auto;
}
Then your message box will be 100x100 and 50px from the top of the screen and automatically aligns to the center of the screen.
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>