web-dev-qa-db-ja.com

純粋なCSSソリューション-正方形要素？

<div>相対的な幅（width：50％など）を使用して、JavaScriptに頼らずに高さと同じ幅にする簡単な方法はありますか？

csslayoutwidthaspect-ratio
20
Trey Keown

this blog で見つけたこのきちんとしたトリックで実際にそれを達成することは可能です

#square {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
}

それが役に立てば幸い

46
Tomasz Kowalczyk

いいえ、そしてはい（Kinda）

さて、簡単な答えは「いいえ」ではありません。長い答えは、「はい」です。特定の制約と譲許（つまり、追加のHTMLマークアップ、および実行できることに対する制限）が与えられます。

このCSSを考えると：

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
    overflow: auto; /* UPDATE: if content may overflow square */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

このHTMLでは：

<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="extrawrapper">
<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
</div>
<div class="extrawrapper">
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
</div>

あなたはそれを行うことができます このフィドルが示すもの 。

キーは次のとおりです。

  1. 使用される画像は、比例サイズ変更を駆動するため、正方形の画像である必要があります（img要素は、画像自体の比率に基づいてサイズを決定できるため、このような比例作業を実行できる唯一の要素です）。
  2. widthとheightのどちらを設定するかを知っている必要があります。これにより、イメージクラスを正しく設定してサイズを設定できます。 オプションで、widthまたはheightをimg自体に設定すると、設定について心配する必要はありません100%値へのクラス。私のデモは、ラッパーdiv（私の.squareクラス）でサイズを設定することを前提としていました。
  3. divを取得してimgを中心に折りたたむと、比例サイジングが発生します。floatにdisplay: inline-blockまたはdivを設定する必要があります（上記のCSS）。
  4. ＃3のため、divをより「ブロックのように」動作させたい場合は、3番目と4番目のラッパーが示すように、ラッパーdivを追加する必要があります。

明らかに、このソリューションには多くの余分なマークアップが含まれています。したがって、多くの点で「JavaScriptを使用する」と言う方が良いですが、私はそれを証明したかったのです。それは（少なくともいくつかのケースでは）純粋にHTMLとCSSで行うことができます。

更新：柔軟なサイジングの可能性を示す

サイズを決定するパーセンテージについては、このフィドルを参照してください 、このhtmlの例（widthを30%に設定）：

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
12
ScottS

今日は似たようなことを達成する必要があり、イメージについても同じ考えを持っていました。私は他の可能性をチェックしたかったし、グーグルは私をここに導いた。

...実際には画像は必要ありませんsrc。正方形が必要な場合は、単にhashを使用できます。 httpリクエストを保存します。

異なるアスペクト比を取得したい場合は、srcを使用する必要があります。 16：9の比率が必要な場合、画像は16pxワイド、9px高（可能な限り小さくする）

両方の手法の比較（このスレッドの他の回答を参照）

img対padding-bottom

フィドルはここにありますimgバージョンの互換性がどれだけあるかを示します（pxvalueも簡単に処理できます（間隔によって「正方形」のサイズが1秒ごとに変更されます）

パーセント値を使用すると、両方の手法で同じ結果を得ることができますが、パディングバージョンでは追加のマークアップ（<img src="#"/>）

結論：

実装に応じて、各手法には長所と短所があります。

HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}
2
user950658

これはCSSだけで行うことはできません。 jQueryを使用すると、次のようにしてこれを実現できます

var chld = $('.child').width();
$('.child').css({'height':chld+'px'});

http://jsfiddle.net/4Jnfq/ で実際の例を確認してください

CSSのみのソリューションは、最後の「コンテンツのサイズ変更」の更新時にここで見つかります。
サークルに適用されますが、border-radius: 50%を正方形に適用します。

0
Praveen Kumar Purushothaman

%のような相対単位ではありません。コンテナエレメントを基準にして計算されるためです。ただし、pxやemなどの単位を使用して両方の寸法を設定すると、要素を正方形にすることができます。

0
bfavaretto

@ praveen-kumarの回答に対する@Daveコメントへの応答としてのネイティブJSアプローチ：

var squareElement = function(el) {
    el.style.height = el.offsetWidth + 'px';
}

そしてどこでもそれを使用して

squareElement(document.querySelector('your-selector'));
0
Antoine