Sizing width of an element as a percentage of its height or vice versa in a fluid design? [duplicate]

8
votes

Im making a responsive design, which has to keep the proportions of its elements (height to width) no matter what the screen size is, so i don't know the size in pixels for any of the elements and i can work only in %.

I can set either the width or the height as a % of the browser size, but the i have no idea how to set the other property value.

That using only CSS, making JS calculate the values is not an option.

3
csslayoutfluid-layout
Just in my opinion, if you do not want to change the layout when the screen size changes for mobile and want to make the same elements (for instance in %tage) shrink to window, dont you think that the User's experience for your screen will be very poor?? – Nitesh
If i find a way to make this work, then i can use media queries to adjust everything else to work in mobile too (like even changing images proportions so an image changes its proportions from 16x9 to 4x3, or something like that). Actually, I'm using this exactly to make a fluid responsive design in the first place. – Bjorkata
Because in mobile display, if you try to make things like "Fluid" responsive, what will happen is that the screen space will proportionately shrink to accommodate for mobile, like you mentioned 16x9 to 4x3, etc,. Where as, media query will make the layout vertically proportional keeping the importance of those elements that you want prominent for a smaller screen relevance. So using media query is a better option rather than making it responsively fluid. – Nitesh
I still don't think that one of the methods excludes the other one, I wanna to be able 1. to define some of the elements proportions according to the screen size 2. modify these proportions using media queries for different screen sizes to keep it usable and providing a consistent UX over all platforms. – Bjorkata
Your mentioned scenario is very much identical to Twitter Bootstrap framework. It does nearly to what you want to accomplish. – Nitesh

3 Answers

6
votes

I came across this problem last year and found an obscure solution after some tedious researching. Unfortunately it involves wrapper DIVs. The structure is simple - you have a parent DIV which contains the contents container and another DIV that sets the proportions. You set the margin-top of the 'proportion' DIV as percent of the width of the parent... Example:

#parent {
    position: relative;
}
.proportions {
    margin-top: 75%; /* makes parent height to 75% of it's width (4:3)  */
}
.container { /* contents container with 100% width and height of #parent */
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

http://jsfiddle.net/twpTU/

0
votes

Use CSS calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc It has pretty good adoption for modern browsers http://caniuse.com/calc as a fall back use CSS media queries and have min widths and heights to fall back on.

Obviously you could always just calculate both percentages in advance.

Div1 needs a height of 60% and the width needs to be 1/4th the height. 60% * .25 = width: 15%

div {
    position: absolute;
    border: 2px solid black
}
#div1 {
    width: 40%;
    height: calc(40% * 1.2);
}
#div2 {
    width: calc(90% / 4);
    height: 90%;
}

http://jsfiddle.net/pU4QA/

0
votes

First, I know that the OP has clearly mentioned that he is not looking for any Javascript approach, however I think it might be useful for couple of people who are still open to use Javascript as well.

Here is the answer; To set the size for both width and height in the same percentage, you can set the width of the parent element to width: 100%; via CSS, then with Javascript you set the height of the parent to the size of width. Then you would have a square-shaped element as the parent.

Now you can apply both width: 10%; height: 10%; to the child elements. Then only things you need to do in order to keep it responsive is to listen for the window resize event and then you apply the height again only to the parent, and all children will be updated.

http://jsfiddle.net/sDzHb/

Something like this will keep it responsive to the browser size:

$(window)
    .resize(function() {
        var w = $(document).width();
        $('.parent').height(w);
    })
    .trigger( 'resize' );