web-dev-qa-db-ja.com

レスポンシブスクエアになるようにdivをスタイルする方法

私は自分のdivが常にその幅と等しくなるようにその高さを適応させたいです。幅はパーセントです。親の幅が狭くなると、縦横比を維持してボックスが狭くなります。

CSSの使い方は？

csscss3layoutresponsive-designaspect-ratio
151
danijar

あなたが探しているものを達成するためにあなたは ビューポートパーセンテージ長さvwを使うことができます。

これは私が jsfiddle を使った簡単な例です。

HTML：

<div class="square">
    <h1>This is a Square</h1>
</div>

CSS：

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

私はこれを行う他の多くの方法があると確信していますが、この方法は私にとっては最善のように思えました。

158
Daniel Burkhart

ほとんどすべてのブラウザで動作します。

あなたはパーセンテージとしてpadding-bottomを与えることを試みることができます。

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

外側のdivは正方形を作り、内側のdivは内容を含みます。この解決策は私にとって何度もうまくいきました。

これが jsfiddle です

175
rahulbehl

HTML

<div class='square-box'>
    <div class='square-content'>
        <h3>test</h3>
    </div>
</div>

CSS

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}

http://jsfiddle.net/38Tnx/1425/

43
gidzior

幅と同じサイズのパディング下部をパーセントで指定するのと同じくらい簡単です。あなたは50％の幅を持っているのであれば、ちょうど以下のこの例を使用してください

id or class{
    width: 50%;
    padding-bottom: 50%;
}

これがjsfiddleです http://jsfiddle.net/kJL3u/2/

応答テキスト付き編集版： http://jsfiddle.net/kJL3u/394

31
Chipe

もう1つの方法は、div内にwidth: 100%、height: autoを含む透明な1x1.pngを使用し、その中に絶対配置のコンテンツを配置することです。

html：

<div>
    <img src="1x1px.png">
    <h1>FOO</h1>
</div>

css：

div {
    position: relative;
    width: 50%;
}

img {
    width: 100%;
    height: auto;
}

h1 {
    position: absolute;
    top: 10px;
    left: 10px;
}

フィドル： http://jsfiddle.net/t529bjwc/

5
gskalinskii

これが私が思いついたことです。これが フィドル です。

まず、正方形と中央揃えのテキストの両方に3つのラッパー要素が必要です。

<div><div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</div></div></div>

これがスタイルシートです。それは2つのテクニックを利用します。1つは 四角形 、もう1つは 中央揃えテキスト .

body > div {
    position:relative;
    height:0;
    width:50%; padding-bottom:50%;
}

body > div > div {
    position:absolute; top:0;
    height:100%; width:100%;
    display:table;
    border:1px solid #000;
    margin:1em;
}

body > div > div > div{
    display:table-cell;
    vertical-align:middle; text-align:center;
    padding:1em;
}
2
danijar