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!

Based on a quick search, text resizing according to the width of its container isn't possible with just css. You'd need some scripting for that. — TreeTree, Apr 04 '14 at 12:58

score 1 · Answer 1 · edited May 23 '17 at 11:49

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

edited May 23 '17 at 11:49

Community

1
1

answered Apr 04 '14 at 13:02

Mr_Green

40,727
45
159
271

Thanks, good find, I wonder why I haven't found that answer yet... This looks like it's basically there, but it would mean I have to use a polyfill for ie8 support due to the transform property, is there another way to vertically align the text? ( Adding 3 elements as table,table-row and table-cell would work, but that's hardly neat ;-) ) – Jaap Moolenaar Apr 04 '14 at 14:41
@JaapMoolenaar try aligning the text with javascript. I don't think there is a way with css. – Mr_Green Apr 04 '14 at 15:45
@JaapMoolenaar I tried to make it look better in IE8.. check this [link](http://jsfiddle.net/cjxB7/10/). almost got it :) – Mr_Green Apr 04 '14 at 15:54

score 0 · Answer 2 · answered Apr 04 '14 at 12:46

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.

Actually, the ratio is always the same at whatever browser size. I think he added the font-size decrease because the text overflows the boxes at some point. Nonetheless, I think decreasing the font at smaller sizes is a good idea. — Jaap Moolenaar, Apr 04 '14 at 14:37
well, the reatio is the same because his texts don't overflow, seeing as they are only 2 lines, but since your text is longer, it forces a bigger height on resize. The other answer simply suggests adding an overflow hidden, but that would not work as your text will not be seen. The complete solution is to decrease the font size for smaller screens and add overflow, otherwise your code is good. — Bobby5193, Apr 04 '14 at 15:06

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

2 Answers2