高度等于宽度的元素，只需要html / css

Question

我有这个想法，只需要css和html就可以将元素设置得很宽。 要求是内部文本将在中心对齐，水平和垂直对齐，甚至跨越多行。

所以根据其他人的想法（ http://www.mademyday.de/css-height-equals-width-with-pure-css.html ）

我做了以下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>

附带以下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;
}

这是一个小提琴： http ： //jsfiddle.net/cjxB7/ 。

这似乎工作得很好，但是，当调整浏览器大小（特别是较长的tekst，浏览器从大到小）时，元素不能保持它们的比例。

我在所有主流浏览器中都试过这个。 他们似乎都有这个警告。

我错过了什么？ 这与表的工作方式有关吗？

如果您还需要更多信息，请与我们联系。 谢谢！

Answer 1

尝试这个：

@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%;
}

工作小提琴

资源

Answer 2

正如您在示例中已经看到的那样，保持纵横比，因为随着浏览器的重新调整大小，字体会变小。

这是通过使用css media-queries为不同视图屏幕中的元素注入不同的css属性来实现的。

示例站点中使用的css更改的媒体查询如下：

@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;
        }
}

正如您在第二个媒体查询中看到的那样，字体会减少以保持容器的比例，同时填充也会减少。

另外，在你的小提琴中，第一个盒子保持它的比例直到非常小的宽度，因为不是很多文本。 我可以开始修改你的小提琴，但我不确切地知道你希望你的文字大小减小，或者你希望如何定义你的媒体查询限制，但这绝对是这里的方式。