I have an iframe with the following css:
.preview-iframe {
width: 100%;
height: 100%;
border: 0;
max-width: 1280px;
max-height: 720px;
margin: auto;
}
It lives inside a container with the following CSS:
.wrapper {
position: absolute;
width: calc(100% - 440px);
height: 0;
left: 0;
top: 0;
bottom: 0;
text-align: center;
background: #1c1c1c;
display: flex;
padding-bottom: 56.25%;
}
the wrapper lives inside a div with
position: fixed
I'm trying to maintain an aspect ratio of 16:9 for the iframe as the window resizes, but the above is not working. What should I do?
<div class="wrapper">
<iframe class="preview-iframe"> ... </iframe>
</div>
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.preview-iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
This is now possible with the new aspect-ratio CSS property:
.element {
width: 100px;
aspect-ratio: 2 / 1;
/* height will automatically be set to 50px */
}
More info here: https://css-tricks.com/almanac/properties/a/aspect-ratio/
It's available in all modern browsers.
Related
I am trying to place a video on my page, which has to be responsive (16:9 all the time). I found a lot of examples, which are basically the same (applying 56.25% padding at the bottom). However, as soon as I apply a max-height and max-width to the iframe (because I don't want it to fill out the entire page), the content underneath starts to move away (because of the padding).
https://jsfiddle.net/12npu2zu/
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
Is there a way to keep it from doing that? The maximum width is 1000px and the maximum height is 563px (16:9).
Is this what are you looking for, i just wrapped all this in one more div and added same style.
<div class="video-holder">
<div id="video-container">
<iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen> </iframe>
</div>
<p>This should stay right underneath the video</p>
</div>
CSS:
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
.video-holder{
display: inline-block;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
https://jsfiddle.net/326w5jqj/
So what I ended up doing was placing a transparent image in the container. Then I applied this CSS to all the items:
#video-container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
img {
display: block;
opacity: 0;
width: 100%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0 none;
}
See it yourself: https://jsfiddle.net/12npu2zu/2/
I have the current html structure
<release_cover>
<overlay_controllers> Green Div </overlay_controllers>
<img src="blu.div" />
</release_cover>
And I want to achieve this:
The img tag is the blue container.
The magenta is the release_cover tag.
I have problem in setting the overlay_controller tag (the green) at a 20% height, exactly positioned at 80% of the container.
So far i did:
release_cover{
width: 100%;
height: 100%;
position: relative;
}
release_cover img{
width: 100%;
height: 100%;
}
overlay_controllers{
min-height: 20%;
margin-top: 80%;
position: absolute;
width: 100%;
}
Unfortunately the height of the green div depends on what's inside and not a fixed 20%.
Suggestions?
(example with the suggestions received so far: https://jsfiddle.net/82Lb0nhe/ )
Using a combination of absolute position along with top, while also not allowing a height greater than 300px it will compute correctly:
.container {
width: 300px;
height: 300px;
}
overlay_controllers {
z-index: 2;
bottom: 0%;
position: absolute;
margin-top:;
height: 20%;
width: 100%;
background-color: #fc0;
}
release_cover {
top: 0px;
width: 100%;
position: relative;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
max-height: 300px;
}
release_cover img {
padding: 0;
margin: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
Working fiddle: https://jsfiddle.net/fL98w9of/
You could position overlay_controllers using top instead of margin-top property:
release_cover {
width: 100%;
height: 100%;
position: relative;
display: block;
}
release_cover img {
width: 100%;
height: 100%;
}
overlay_controllers {
position: absolute;
top: 80%;
height: 20%;
width: 100%;
overflow: hidden;
}
In IE9 This Page element section#tcs-website-content shows 990px width with CSS width: 100% where all parent elements have width of 100% thus having browser width which is 1024px
I have no experience with IE9 whatsoever, so I don't know what is the problem I need to look at.
CSS (LESS) for the elements:
html, body {
margin: 0;
padding: 0;
max-height: 100%;
min-height: 100%;
height: 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
position: relative;
background: none;
font-family: 'muliregular','oswaldregular',Arial;
}
#viewport {
display: none;
position: relative;
float: left;
width: 100%;
height: 100%;
overflow-y: hidden;
background: none;
}
#tcs-website-content {
position: absolute;
z-index: 100;
top: 120px;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
overflow-y: auto;
#bundle .box-sizing();
& .inner-content {
width: 960px;
margin: 0 auto;
}
}
If you want to be sure it covers the whole width, I would add the following definition to #tcs-website-content:
right: 0;
I am designing my first responsive website. Things were great until now when I set container div to be 100%. The idea was to have to container div to be 100% with max width 768px. If the browser window is less than 768px, the container show take up 100% screen size WITHOUT overflow.
It looks like setting .container {width: 100%} is making the container a fixed 678px even when screen size is smaller, thus causing overflow.
Can someone help?
Example:
/* --- Main style - not media --- */
html, body {
width: 100%;
height: 100%;
}
.main {
position: relative;
width: 100%;
height: 100%;
min-width: 829px;
}
.all-wrapper {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
position: relative;
}
.container {
position: absolute;
top: 6.0em;
width: 70%;
left: 0;
max-width: 1140px;
min-width: 500px;
margin-bottom: 0;
}
.content-box {
position: relative;
width: 80%;
margin: 2.0em auto 3.0em;
padding: 1.0em;
}
/* -------Media -----------*/
#media screen and (max-width: 767px) {
.main {
max-width: 100%
min-width: 0;
}
.container {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
.content-box {
position: relative;
width: 90%;
margin: 0 auto;
padding-bottom: 4.0em;
}
}
/*-- html ----*/
<div class= "main">
<div class="container">
<div class="content-box">
<p>stuff</p>
</div>
</div>
</div>
I have a page that needs to stretch and resize with with window and I've managed to do that but I need that the "inner div" (#pgContent) stretch if the window is resized to higher dimensions but that it doesn't shrink more than, let's say for example 800 x 600 px.
As I have it now it stretches well but it also shrinks more than I want!
It's working as I want in width but not in height!?
Here's a visual example:
My CSS:
* {
margin: 0;
padding: 0;
outline: 0;
}
/*| PAGE LAYOUT |*/
html, body {
height: 100%;
width: 100%;
/*text-align: center;*/ /*IE doesn't ~like this*/
cursor: default;
}
#pgWrapper {
z-index: 1;
min-height: 100%;
height: auto !important;
/*min-height: 600px;*/ /* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
#pgContent {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 50px;
overflow: hidden;
background: #CCC;
}
#footWrapper {
z-index: 2;
height: 50px;
min-width: 940px;
position: absolute;
left: 30px;
right: 30px;
bottom: 0px;
background: #C00;
}
/*| END PAGE LAYOUT |*/
And the HTML:
<body>
<div id="pgWrapper">
<div id="pgContent">
This DIV should stretch with window but never lower than for example 800px x 600px!<br />
If window size is lower then scrollbars should appear.
</div>
</div>
<div id="footWrapper">
<div id="footLft"></div>
<div id="footRgt"></div>
</div>
</body>
If someone could give me a help on this I would appreciate.
Thanks in advance.
The second min-height will overwrite the first one.
Use a height of 100% and min-height of 680px;
#pgWrapper {
z-index: 1;
min-height: 600px;
height: 680px;
min-width: 800px;
width: 100%;
}
I belive height auto is messing with your stretching, commenting it out made your styles behave much better. Of course it might be down to different browsers
#pgWrapper {
z-index: 1;
min-height: 100%;
/*height: auto !important;*/
min-height: 680px;
/* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
Working sample:
http://jsfiddle.net/QqMeC/4/
Have you tried using the following in #pgWrapper
overflow: auto;
DEMO: http://jsfiddle.net/jonocairns/LA8hg/