4

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?

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
theorise
  • 7,245
  • 14
  • 46
  • 65
  • A very similar question was asked [here](http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout), and [this](http://stackoverflow.com/a/6615994/1190255) is the preferred answer. However, in that question and answer it is the height that adjusts depending on the width. I tried adapting it such that the width depends on the height, but so far I haven't had any luck. Maybe you can get in touch with them and see if they've come up with a solution. – BigMacAttack Oct 06 '13 at 04:58
  • @BigMacAttack its a script solution. you can do whatever you want with a script.. but I want to know if its possible using CSS only. – avrahamcool Oct 06 '13 at 13:01
  • @BigMacAttack i see now that the other answers from that post are CSS only. thanks. – avrahamcool Oct 06 '13 at 13:07
  • @avrahamcool Yeah, the CSS solution I linked to has *way* more up votes than the selected answer. ;) Did you take a look at the guy's blog post [found here](http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio)? Maybe you can get in touch with either him, or that other guy he references who figured it out. Maybe they have a solution to adjust the width depending on the height. – BigMacAttack Oct 06 '13 at 18:57
  • @BigMacAttack actually, your answer suffice me. post it and I'll award you the bounty. – avrahamcool Oct 07 '13 at 06:45
  • @avrahamcool I've posted an answer. I've also reached out to Nathan Ryan, the individual that posted the CSS solution, to see if he has an alternate technique he can post here for a "height depending on width" element. – BigMacAttack Oct 07 '13 at 16:18
  • Sorry for the slow responses, I will check this out in a few hours! Many thanks for all of the answers! – theorise Oct 08 '13 at 09:12

3 Answers3

2

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.

avrahamcool
  • 13,888
  • 5
  • 47
  • 58
2

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.

Community
  • 1
  • 1
BigMacAttack
  • 4,479
  • 3
  • 30
  • 39
-1

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;
 }
Black Sea
  • 124
  • 1
  • 9