I was reading Can You Make an iFrame Responsive?, and one of the comments/answers led me to this JSFiddle.
But when I tried to implement the HTML and CSS to fit my needs, I didn't have the same results/success. I created my own JSFiddle so I could show you how it doesn't work the same for me. I'm sure it has something to do with the type of iFrame I'm using (e.g., the product images might need to be responsive too or something?)
My main concern is that when my blog readers visit my blog on their iPhone, I don't want everything to be at x width (100% for all my content) and then the iFrame misbehaves and is the only element wider (and hence sticks out past all the other content - if that makes sense?)
Does anyone know why it's not working?
Here is the HTML & CSS of my JSFiddle (if you don't want to click on the link):
.wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
background: #ffffff;
}
.h_iframe {
position: relative;
}
.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}
.h_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
<iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
</div>
</div>
I present to you The Incredible Singing Cat solution =)
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
As you move the window bar, you'll see iframe to responsively resize
Alternatively, you may also use the intrinsic ratio technique
This is just an alternate option of the same solution above (tomato, tomato)
.iframe-container {
overflow: hidden;
padding-top: 56.25%; /* 16:9 */
position: relative;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100%;
height: 100%;
}
Try using this code to make it responsive
iframe, object, embed {
max-width: 100%;
}
I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:
.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="myIframe">
<iframe> </iframe>
</div>
You can use this tricks mentioned on this site http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php.
Its very useful and easy to understand. All you need to create
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
Here is your edited js fiddle for demonstration.
Check out this solution. It works for me
https://jsfiddle.net/y49jpdns/
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
font-family: arial;
font-size: 10px;
color: #6e6e6e;
background-color: #000;
}
#preview-frame {
width: 100%;
background-color: #fff;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var calcHeight = function() {
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
</iframe>
</body>
</html>
iframe{
max-width: 100% !important;
}
iFrames CAN be FULLY responsive while keeping their aspect ratio with a little CSS technique called the Intrinsic Ratio Technique. I wrote a blog post addressing this question specifically: https://benmarshall.me/responsive-iframes/
This gist is:
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
.intrinsic-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="intrinsic-container intrinsic-container-16x9">
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
BOOM, fully responsive!
iframes cannot be responsive. You can make the iframe container responsive but not the content it is displaying since it is a webpage that has its own set height and width.
The example fiddle link works because it's displaying an embedded youtube video link that does not have a size declared.
DA is right. In your own fiddle, the iframe is indeed responsive. You can verify that in firebug by checking iframe box-sizing. But some elements inside that iframe is not responsive, so they "stick out" when window size is small. For example, div#products-post-wrapper's width is 8800px.
Simple, with CSS:
iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}
Please, note: But it won't make the content inside it responsive!
2nd EDIT:: There are two types of responsive iframes, depending on their inner content:
one that is when the inside of the iframe only contains a video or an image or many vertically positioned, for which the above two-rows of CSS code is almost completely enough, and the aspect ratio has meaning...
and the other is the:
contact/registration form type of content, where not the aspect ratio do we have to keep, but to prevent the scrollbar from appearing, and the content under-flowing the container. On mobile you don't see the scrollbar, you just scroll until you see the content (of the iframe). Of course you give it at least some kind of height, to make the content height adapt to the vertical space occurring on a narrower screen - with media queries, like, for example:
#media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
#media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
I noticed that leowebdev's post did seem to work on my end, however, it did knock out two elements of the site that I am trying to make: the scrolling and the footer.
The scrolling I got back by adding a
scrolling="yes"
To the iframe embed code.
I am not sure if the footer is automatically knocked out because of the responsiveness or not, but hopefully someone else knows that answer.
Remove iframe height and width specified in pixels and use percentage
iframe{ max-width: 100%;}
<div class="wrap>
<iframe src="../path"></iframe>
</div>
.wrap {
overflow: auto;
}
iframe, object, embed {
min-height: 100%;
min-width: 100%;
overflow: auto;
}
it solved me by adjusting code from #Connor Cushion Mulhall by
iframe, object, embed {
width: 100%;
display: block !important;
}
If you happen to be using the Bootstrap CSS library, you can use the responsive embed classes that it provides:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Several different aspect ratios are supported, see the documentation.
With the following markup:
<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>
The following CSS makes the video full-width and 16:9:
.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
}
.video > .video__iframe {
position: absolute;
width: 100%;
height: 100%;
border: none;
}
}
I am search more about this topic and finally get a nice answer.
You can try like this:
.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
<div class="container">
<iframe src="there is path of your iframe"></iframe>
</div>
</div>
The best solution to make an "iframe" responsive and fit with all device screens , simply apply this code (working great with Games sites):
iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}
#media screen and (max-width:992px){.iframe iframe{height:720px}}
#media screen and (max-width:768px){.iframe iframe{height:720px}}
#media screen and (max-width:720px){.iframe iframe{height:720px}}
#media screen and (max-width:479px){.iframe iframe{height:480px}}
#media screen and (max-height:400px){.iframe iframe{height:360px}}
If you're looking for a responsive games container fit with all devices apply this code which uses advanced CSS #media queries.
Fully responsive iFrame for situations where aspect ratio is unknown and content in the iFrame is fully responsive.
None of the above solutions worked for my need, which was to create a fully responsive iFrame that had fully responsive dynamic content inside of it. Maintaining any kind of aspect ratio was not an option.
Get height of your navigation bar and any content ABOVE or BELOW the iFrame. In my case I only needed to subtract the top navbar and I wanted the iFrame to fill all the way down to the bottom of the screen.
Code:
function getWindowHeight() {
console.log('Get Window Height Called')
var currentWindowHeight = $(window).height()
var iFrame = document.getElementById("myframe")
var frameHeight = currentWindowHeight - 95
iFrame.height = frameHeight;
}
//Timeout to prevent function from repeatedly firing
var doit;
window.onresize = function(){
clearTimeout(doit);
doit = setTimeout(resizedw, 100);
};
I also created a timeout so that on resize the function wouldn't get called a million times.
The code below will make the fixed width content of a non-responsive website within an iframe resize to the viewport width, only if its width is larger than the viewport width. For demo purposes the website is a single image 800 pixels wide. You can test by resizing your browser window or load the page in your phone:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
iframe {width: 100%; transform-origin: left top;}
.imgbox{text-align:center;display:block;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function($){
nsZoomZoom();
$(window).resize(function(){
nsZoomZoom();
});
function nsZoomZoom(){
htmlWidth = $('html').innerWidth();
iframeWidth = 800;
if (htmlWidth > iframeWidth)
scale = 1;
else {
scale = htmlWidth / (iframeWidth);
}
$("iframe").css('transform', 'scale(' + scale + ')');
$("iframe").css('width', '800');
}
});
</script>
</head>
<body>
<div class=imgbox>
<iframe src="http://placekitten.com/g/800/600" scrolling=no width=800 height=600 frameborder=no></iframe>
</div>
</body>
If you are using bootstrap 4 then just use utility class for embed
https://getbootstrap.com/docs/4.5/utilities/embed/
Example:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Xh3j915ZnCo?rel=0" allowfullscreen></iframe>
</div>
For Example:
<div class="intrinsic-container">
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
CSS
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I had to show iframe in square so thats what i used
.video-wrapper {
position: relative;
padding-bottom: 100%;
}
.video-wrapper iframe {
position: absolute;
width: 100%;
height: 100%;
border: none;
}
Check out this full code. you can use the containers in percentages like below code:
<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>
Related
Within Youtube the html to embed a video is of the form
<iframe width="560" height="315" src="https://www.youtube.com/embed/6Es-eaG4xPg"
frameborder="0" allowfullscreen></iframe>
but of course with trying to make pages mobile compatible there will be a problem when screensize less than 560 in width.
So I changed my code to
<iframe class="screencast" src="https://www.youtube.com/embed/6Es-eaG4xPg"
frameborder="0" allowfullscreen></iframe>
and in stylesheet had
.screencast {
width=560
height=315
}
the idea being i could have different sections for different media widths
i.e
#media screen and (min-width:300px) and (max-width: 499px) {
.screencast {
width=280
height=158
}
But this had no effect at all the video was now always shown on the screen too small and its size never changed it seems to be ignoring the css class
Then I found this question
Shrink a YouTube video to responsive width
which requires a div to be added round the frame
e.g
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/9Cf_xEbUzqE" n allowfullscreen></iframe>
</div>
and then this added to the css
.videowrapper {
margin:auto
float: none;
clear: both;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
width: 100%;
height: 100%;
}
This works except it makes the video take up the full width which I dont want, I can change the width
e.g
.videowrapper iframe {
position: absolute;
width: 50%;
height: 50%;
}
and that works except it doesnt horizontally centre the video
I have tried various things such as
.videowrapper iframe {
position: absolute;
left: 25%
width: 50%;
height: 50%;
}
but nothing I have done has centered the image, how can I resolve this, and why didn't my simple approach of putting a class on the iframe have any effect.
You can use this code
.video_center iframe{
margin: 0 auto;
display:table;
}
I am trying to get a YouTube video to display at 100% width and height. It seems the iframe itself is doing what I want, however, once the video plays it is only 100% width up to 1100px.
I have tried searching the web but cannot find a solution to get the video itself to be the same width as the video poster and iframe width.
Try this:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/ZLyS2wHiZM8"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Reference article
I assume your video ratio is 16:9. Maybe you can try this:
.container {
width: 100vw;
height: 56.25vw;
}
.video {
width: 100%;
height: 100%;
}
This is an example link
Your video has already a 100% width. When I make a right-click on the left or right side of the video, the context menu of the youtube video appears. Check this screenshot
I think the problem is about your video. Your video don't have the right width and height to appear correctly.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.sized {
height: 100%;
position: relative;
background: #eee;
overflow:hidden;
padding:0;
}
.sized iframe {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#media (min-width: 320px) {
height: 200%;
top: -50%;
}
#media (min-width: 640px) {
height: 180%;
top: -40%;
}
<div class="sized">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<h3>Original video</h3>
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
As I get a cookies same origin error in the snippets result, here is a mirror:
https://jsfiddle.net/07Lffw5x/2/embedded/result/
[edit] Maybe this is a better demo, if you compare to this one, there is not much difference... why? [/edit]
I'm trying to reproduce a background-size cover for an iframe.
The thing is that it seems to rescale the video, for bigger sizes only,
Question,
Can the rescales take effect on every breakpoint? or the vimeo player might rescale by it's own anyway?
Similar to Alvaro Menendez's answer, credit needs to go to this answer stackoverflow.com/a/29997746/3400962 by Qwertman. I got as far as using the "padding percentage" trick, but this answer's clever use of viewport units is crucial to this working.
The key to implementing this behaviour is to ensure two things:
That the iframe always maintains the same aspect ratio as its video content 16 : 9. This will ensure that no black "padding" is present around the outside of the video
That the iframe always fills the height or width depending on the size of the viewport
One way to maintain the aspect ratio of an element is to use the "padding percentage" trick which takes advantage of the fact that top and bottom padding uses the width of the element as the basis for their value. Using the formula B / (A / 100) = C% we can calculate the required percentage for the padding. Given the video has a 16 : 9 ratio this translates to 9 / (16 / 100) = 56.25.
The only problem is that in your case the calculation is required for both the horizontal and vertical axis (as we don't know what dimensions the viewport will be) and this trick will not work with left and right padding to get the aspect ratio in relation to the height.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
.inner {
left: 50%;
min-height: 43.75%;
padding-top: 56.25%;
position:absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container iframe {
bottom: 0;
height: 100%;
left: 0;
position:absolute;
right: 0;
top: 0;
width: 100%;
}
<div class="container">
<div class="inner">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
https://jsfiddle.net/w45nwprn/ (Snippet doesn't show video, please see fiddle)
Luckily, in your case you want the video to fit the entire screen so viewport units can be used to calculate the aspect ratio instead of percentages. This allows use to calculate the width in relation to the height and vica versa:
left: 50%;, top: 50%; and transform: translate(-50%, -50%); are required to center the iframe in .container
min-height: 100%; and min-width: 100%; are required to ensure that the height and width are never smaller than that of .container
height: 56.25vw; will set the height in relation to the width of the viewport. This is calculated by doing 9 / (16 / 100) = 56.25
width: 177.77777778vh; will set the width in relation to the height of the viewport. This is calculated by doing 16 / (9 / 100) = 177.77777778
Because the height and width can never be below 100% but the must remain in the correct aspect ratio the video will always cover the whole viewport.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
<div class="container">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
https://jsfiddle.net/qk00ehdr/ (Snippet doesn't show video, please see fiddle)
Viewport units are widely supported, so as long as you are not targeting old browsers this method should work.
Ok. The merit is NOT mine as I got the jquery here
I remembered that question as I used it on one of my old projects and I wanted to check if it would work the same with an iframe. It does.
basically with this css:
.container {
position: absolute;
top: 0;
overflow: hidden;
}
and this jquery:
var min_w = 300; // minimum video width allowed
var vid_w_orig; // original video dimensions
var vid_h_orig;
jQuery(function() { // runs after DOM has loaded
vid_w_orig = parseInt(jQuery('iframe').attr('width'));
vid_h_orig = parseInt(jQuery('iframe').attr('height'));
jQuery(window).resize(function () { resizeToCover(); });
jQuery(window).trigger('resize');
});
function resizeToCover() {
// set the video viewport to the window size
jQuery('.container').width(jQuery(window).width());
jQuery('.container').height(jQuery(window).height());
// use largest scale factor of horizontal/vertical
var scale_h = jQuery(window).width() / vid_w_orig;
var scale_v = jQuery(window).height() / vid_h_orig;
var scale = scale_h > scale_v ? scale_h : scale_v;
// don't allow scaled width < minimum video width
if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};
// now scale the video
jQuery('iframe').width(scale * vid_w_orig);
jQuery('iframe').height(scale * vid_h_orig);
// and center it by scrolling the video viewport
jQuery('.container').scrollLeft((jQuery('iframe').width() - jQuery(window).width()) / 2);
jQuery('.container').scrollTop((jQuery('iframe').height() - jQuery(window).height()) / 2);
};
You get this: JSFIDDLE
(I know you were looking for a pure css solution, which I don't think it's possible but I can be wrong, but I have posted this answer because it could help other people with same issue)
I have a div with a background image that will overlay part of the header slideshow. I want the width of the div to always be 100% of the window size, even when the user re-sizes it. The height should change based on the aspect ratio of the background image. The dimensions of the background image is 1500x406.
Here's the sample code:
HTML
<div id="wrapper" class="clearfix">
<div id="bg_img"></div>
</div>
CSS
.clearfix {
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
position: absolute;
z-index: 100;
top: 9em;
width: 100%;
height: 406px;
margin: 0 auto;
display: inline;
}
The working JSFiddle
To make an element maintain proportions you only have to use this code
<div id="some_div"></div>
#some_div:after{
content: "";
display: block;
padding-top: 100%; /* the percentage of y over x */
}
So this is how to achieve it. Demo
<div id="wrapper">
<div id="bg_img"></div>
</div>
<div class="clearfix"></div>
N.B. clearfix isn't required for this solution, OP had it in his code.
CSS
#wrapper{
position: relative;
width: 100%;
}
#wrapper:after{
content: "";
display: block;
padding-top: 27.06666%; /* 406 over 1500 */
}
#bg_img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(http://placekitten.com/1500/406);
background-size: 100% 100%;
}
This is what I've used in the past to support back to IE8. Used in conjunction with a small js plugin here that supports the filters: http://louisremi.github.io/jquery.backgroundSize.js/demo/
img {
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover')";}
background-position:50% 0;
}
I found a solution which is simple and works great for me. Create a transparent PNG for the aspect ratio you desire, e.g. 15px x 4px.
put the image within the div. Set the image's width to 100%. It will expand to the div's width and grow in the proper aspect ratio vertically, pushing the div's height down to the proper aspect ratio.
Something like this (this exact sample untested):
<div style="width: 100%">
<img src="..." style="width: 100%" />
</div>
You could, of course, do this with the other dimension (height) as well by defining it instead of width.
Simple enough. Works for me.
--
Andrew
This somewhat distorts the image, but it might be what you are looking for:
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
min-width:100%;
min-height:100%;
background-size:cover;
}
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}