I am trying to create a responsive iframe that will get a map, but when I resize the browser, it resizes using the aspect ratio, and I would like him to remain filling the entire space. As in this example: http://dev.fhmp.net/tailorfit/demo/, in the case where the overflow is crop.
Today it looks like this:
.iframe-rwd {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section id="container">
{% include "main/header.html" %}
{% include "main/sidebar.html" %}
<section id="main-content">
<section style="padding-right: 0px;padding-left: 0px;" class="wrapper">
<div class="iframe-rwd">
<iframe
name="main-content"
src=""></iframe>
</div>
</section>
</section>
</section>
In the past i've just set the iframe width to 100%, if you have the iframe in a responsive container than it will always take that width and retain whatever height you set the iframe to.
This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.
HTML
<div class="iframe-rwd">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
css
.iframe-rwd {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
In the background of my slider, an image with negative z-index is placed. That way, the image can contain alt-text and have the effect of a fixed background-image.
At first glance, this works fine, but during the transition to the new slide, the z-index of the background-image seems to be overwritten and is displayed on top of everything else. How can I solve this?
const banner = document.getElementsByClassName("banner");
let activebanner = 0;
setInterval(changebanner, 8000);
function changebanner() {
banner[activebanner].classList.remove("active");
activebanner++;
if (activebanner === banner.length) {
activebanner = 0;
}
banner[activebanner].classList.add("active");
}
.slider {
width: 100%;
position: relative;
height: 600px;
}
.banner {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition-duration: 1s;
}
.banner.active {
visibility: visible;
opacity: 1;
}
.banner-image {
position: fixed;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 620px;
z-index: -2;
}
.image-credits {
position: absolute;
bottom: 0;
right: 0;
}
<div class="slider">
<div class="banner active">
<img class="banner-image" src="path-to/image.jpg" alt="A background-image.">
<div class="content">
<h1>A clever Tagline</h1>
</div>
</div>
<div class="banner">
<img class="banner-image" src="path-to/image.jpg" alt="A background-image.">
<div class="content">
<h1>A clever Tagline</h1>
<p class="image-credits">Image by Photographer</p>
</div>
</div>
<div class="banner">
<img class="banner-image" src="path-to/image.jpg" alt="A background-image.">
<div class="content">
<h1>A clever Tagline</h1>
</div>
</div>
</div>
I set the overflow state of the whole slider and of the banner to hidden. That did not work. Another solution was to give the whole slider a negative z-index. But then, the link on the image-credit isn't clickable anymore, because the slider is behind the website body. Searching online for this specific problem did not get me any useful results. I only find solutions and other questions about how to animate the z-index.
I'm trying to mantain the 16:9 ratio when I insert responsive iframes inside a flexbox.
.video-media-youtube-inner {
display: flex;
flex-wrap: wrap;
}
div[class^="video-media-youtube-inner-vi"] {
flex: 0 0 50%;
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
div[class^="video-media-youtube-inner-vi"] iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-media-youtube">
<div class="video-media-youtube-inner">
<div class="video-media-youtube-inner-vi01">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
<div class="video-media-youtube-inner-vi02">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
<div class="video-media-youtube-inner-vi03">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
</div>
But, as you can see from the snippet, the iframe width is shrinked correctly but the height remain always the same. Is it possible to mantain the 16:9 ratio in flexbox items?
Try adding an extra <div> around the <iframe>s:
.video-media-youtube-inner {
display: flex;
flex-wrap: wrap;
}
div[class^="video-media-youtube-inner-vi"] {
flex: 0 0 50%;
}
div[class^="video-media-youtube-inner-vi"] .sixteen-by-nine {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
div[class^="video-media-youtube-inner-vi"] iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-media-youtube">
<div class="video-media-youtube-inner">
<div class="video-media-youtube-inner-vi01">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
<div class="video-media-youtube-inner-vi02">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
<div class="video-media-youtube-inner-vi03">
<div class="sixteen-by-nine">
<iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
</div>
</div>
</div>
</div>
On another note - Perhaps you are using a convention I'm not familiar with, but I think it would be more standard and also more maintainable to just use a consistent class like video-media-youtube-inner for your inner <div>s and then assign them unique ids (vi01, vi02, vi03). That way, you could just access them via .video-media-youtube-inner in your CSS, or #vi01 if you need to target a specific one.
I would like to have a container and set the background image for the container.
This container must be resizable when resizing the window.
Inside that container there are set of divs which have absolute positions and different z-indexes and assemble an snapshot of a car.
by re-sizing the window this bike also should re-size and stay in the center of that container.
<div class="col-lg-8 left-panel">
<div class="resizable-container">
<div class="resizable-wrapper">
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
</div>
</div>
</div>
.resizable-container{
width: 100%;
min-height: 400px; (this height also should be resizable)
background: url('background.jpg');
}
.resizable-wrapper{
position: relative;
height: 100%;
/* margin: 0px auto; */
top: -59px; (I have to do this to make the image position centered)
left: -19%; (I have to do this to make the image position centered)
}
Can you guys help me please to achieve this? Do I need to write some script to set the height, top and left or I can do this purely using CSS. In both way I need your help. Thanks
here is the Jsfiddle https://jsfiddle.net/7dsggjpo/3/
I've managed to do a Iframe that shows only certain part of the page with this code:
<div id="divContainer" style="display: block; margin-left: auto; margin-right: auto;">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="http://www.cofm.es/informacion-corporativa/buscador-farmacias" scrolling="no" style="width: 1000px; height: 750px; margin-top: -330px; margin-left: -250px;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
</div>
Source: iframe to Only Show a Certain Part of the Page
Now what I'm trying to do is to make the Iframe show on the 100% width on the screen. I've been able to do this with images with this code:
<img style="width: 100%; display: block; margin-left: auto; margin-right: auto; " src="http://i.ytimg.com/vi/ROv863DuJu4/maxresdefault.jpg" />
I'm trying to make the iframe adapt to the screen size like the image does.
Iframe is an inline element - You need to set css " display:block " - then you can make it 100% and it will scale - Hope this helps.
here is an example - you would have to set the containing element to full width as well..
<iframe style='display:block;width:100%' src='http://someurl.com'></iframe>
https://jsfiddle.net/cqgfqgqk/
I have the following code:
<div xmlns="http://www.w3.org/1999/xhtml"
style="z-index: 1; position: absolute; top: 90px; left: 90px; background: none repeat scroll 0% 0% black; width: 800px;"
id="mainDiv">
<div style="width: 405px;" class="floatLeft" id="mainDiv3">
<div style="width: 100%;" id="mainDiv31">
<div style="width: 107px; height: 100%;" class="floatLeft"
id="mainDiv313"></div>
<div
style="width: 2px; height: inherit; background-color: white; cursor: default;"
class="floatLeft" id="mainDiv31_vertical"></div>
<div style="width: 296px; height: 100%;" class="floatLeft"
id="mainDiv314"></div>
</div>
<div
style="height: 2px; width: 100%; background-color: white; cursor: default;"
id="mainDiv3_hotizontal"></div>
<div style="height: 311px; width: 100%;" id="mainDiv32"></div>
</div>
<div
style="width: 2px; height: inherit; background-color: white; cursor: default;"
class="floatLeft" id="mainDiv_vertical"></div>
<div style="width: 393px;" class="floatLeft" id="mainDiv4">
<div style="height: 456px; width: 100%;" id="mainDiv41"></div>
<div
style="height: 2px; width: 100%; background-color: white; cursor: default;"
id="mainDiv4_hotizontal"></div>
<div style="height: 142px; width: 100%;" id="mainDiv42"></div>
</div>
</div>
Now I want to change the height of all elements with id's ending with _vertical to be automatically set to its parent height, I mean it should get resized automatically in case its parent's div's height increses that increase will be due to addition on some more elements to its botherly div.
For example:
On adding some stuff to mainDiv313 will increase its parent height i.e. mainDiv31 height which in turn should increase mainDiv31_vertical
What should be assigned to height of mainDiv31_vertical so that it exhibits this behavior. i would prefer not changing it by JS or Jquery as it increases processing...
Already set it to inherit as it will make it inherit the height from parent.
Please suggest something.
EDIT
i want something like
div1 -->div11
>div1_vertical
>div12
this means div1 has these 3 other div in it on change div11 height div1_verticalheight should change automatically without some js or jquery i want some css property
i haven' mentioned any height on div1 so it automatically adjusts it children
You can do this with jQuery:
$("div[id$='_vertical']").height(function(){
return $(this).parent().height();
});
But dear lord, you shouldn't. IDs should be unique and semantic, not descriptive of a property. That's what classes are for. Use a class="vertical" instead
To set all div elements with an id that ends with _vertical, this should do the trick:
$("div[id$='_vertical']").height(function(){
return $(this).parent().height();
});
However, it is not possible to do this automatically when the parent height is changed because there are no events to bind to when it comes to DOM manipulation and mutation.
I also agree with Roland that you shouldn't have _vertical in your id, but rather as a separate class.
Here's an example using CSS with relative/absolute positioning that might work for you.
CSS
div.vertical {
position: relative;
}
div.vertical div {
position: absolute;
top: 0;
bottom: 0;
}
HTML
<div id="mainDiv31" class="vertical">
<div id="mainDiv313"></div>
</div>