Elements with a height equal to their width with just html/css

Question

I had this idea for making elements as high as they are wide with just css and html. A requirement was that the text inside would be aligned in the center, horizontally and vertically even across multiple lines.

So based on some other peoples thoughts on this ( http://www.mademyday.de/css-height-equals-width-with-pure-css.html )

I made the following HTML:

<span class='box'>
 <span class='height'></span>
 <span class='content'>This is just a longer text to demonstrate multiple lines being centered.</span>
</span>

Accompanied by the following CSS:

.box {
    /* width */
    width: 25%;

    display: table;
}
.height {
    display: table-cell;

    /* The height for this item will become this %-age of the width of the .box, so this is 1:1 ratio */
    padding-top: 100%;
}
.content {
    display: table-cell;

    vertical-align: middle;
    text-align: center;
}

Here's a fiddle: http://jsfiddle.net/cjxB7/ .

This seems to work just fine, however, when resizing the browser ( especially the longer tekst, with the browser from big to small ) the elements don't keep their ratio.

I've tried this in all major browsers. And they all seem to have this caveat.

What am I missing? Does this have something to do with the way tables work?

Please let me know if you need more to go on. Thanks!

Answer 1

Try this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
body {
    font-family:'Open Sans', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
}
.box {
    width: 25%;
    height: 0;
    position: relative;
    padding-bottom: 25%;
    overflow: hidden;
    float: left;
    background-color: #9c9;
    color: #fff;
    text-shadow: 1px 1px #666;
    box-shadow: 0px 0px 1px 1px #666;
    border: 2px solid;
    margin: 1%;
    position: relative;
}
.box.ratio2_1 {
    padding-bottom: 12.5%;
}
.box > div {
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    top: 50%;
    position: absolute;
    text-align: center;
    width: 100%;
}

Working Fiddle

Source

Answer 2

As you have probably seen already in the example you provided, the aspect ratio is maintained because the fonts get smaller as the browser is re-sized.

This is achieved by using css media-queries to inject different css properties for the elements in different view screens.

The media queries used in the example site with the css changes are as follows :

@media screen and (max-width: 1000px)
{
    body#innen article div.center
    {
        width: 100%;
        margin-left: 0px;
    }

    body#innen article h1
    {
        margin-left: 0px;
        margin-top: 200px;
    }

    body#innen article summary
    {
        margin-left: 0px;
        width: 100%;
    }
}

@media handheld and (max-device-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 780px)
{
    body#innen article h1
    {
        margin-left: 0px;
        margin-top: 200px;
    }

    body#innen article summary
    {
        margin-left: 0px;
        width: 100%;
    }

    body#innen article div.center
    {
        width: 100%;
        margin-left: 0;
    }

    .content
    {
        padding: 3px;
    }

        .content, .content span
        {
            font-size: 10px;
            text-transform: none;
        }
}

As you see in the second media query, the font is decreased in order to maintain the ratio of the container, also the padding is decreased.

Also, in your fiddle, the first box keeps maintaining it's ratio until a very small width, because the is not a lot of text. I could start modifying you fiddle, but I do not know exactly how you want your text to decrease in size, or how you want your media query limits defined, but this is definitely the way to go here.