html - 可変レイアウトのコンテンツを含むスクエア DIV

Answer 1

これは、私が実際にしばらくいじっていたもので、過去 10 年間でほとんどのブラウザーで動作するように見える、準 (ただし完全ではない) ハッキーな CSS のみのソリューションを思いつきました。コツは、画像を使用し、トリッキーな方法で配置することです。コードの次の (簡略化) を検討してください。

マークアップ:

<div class="sqr_box">
    your content goes here!
</div>

CSS:

.sqr_box
{
    width: 50%; /* or 100px, or 20em, or whatever you want */
    border: solid 2px pink;
    background-color: grey;
    color: white;
}

高さをパーセントで設定することはできません。代わりに、最初に Photoshop に入り、2x2 ピクセル、透明、または背景色の画像を作成します。次に、以下をマークアップに追加します。

<div class="sqr_box">
    <img src="images/sizers/2x2.png" class="sizer">
    <div class="content">your content goes here!</div>
</div>

そしてこれをあなたのCSSに：

.sqr_box
{
    width: 50%; /* or 100px, or 20em, or whatever you want */
    position: relative; /* static positioning is less than ideal for this scenario */
}

.sqr_box > img.sizer
{
    display: block; /* images default to an inline-block like thing */
    width: 100%;
    height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
    visibility: hidden;
}

.sqr_box > .content
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;  /* Our parent element now has a dynamically assigned height, this will work */

    border: solid 2px pink;
    background-color: grey;
    color: white;
}

何よりも、これはあなたが望むどんなサイズのボックスの比率でも機能します! 画像の縦横比を変えるだけ！

3か月後、これがすべてあなたに関連していることを願っています.

-砂の

Answer 2

4つの列すべてを1つのdivに配置します。そのdivを100％幅に設定し、フォントサイズを100emに設定します

4つの列のそれぞれの幅を25％ではなく25emにします

ロゴの幅と高さをそれぞれ25emに設定します