24

<div>相対的な幅（幅：50％など）のを持っている場合、JavaScriptを使用せずに、高さと同じ幅にする簡単な方法はありますか？

4

6 に答える 6

53

私が このブログで見つけたこの巧妙なトリックでそれを達成することは実際に可能です 

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

お役に立てば幸い

于 2013-10-18T11:22:21.823 に答える
12

いいえ、はい（キンダ）

さて、簡単な答えは「いいえ」です。不可能です。長い答えは、特定の制約と譲歩（つまり、追加の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またはを設定するかどうかを知る必要があります。オプションで、またはをそれ自体に設定すると、クラスを値に設定することを心配する必要はありません。私のデモでは、ラッパーdiv（私のクラス）でサイズを設定することを前提としていました。heightwidthheightimg100%.square
  3. 比例サイジングを駆動しているの周りを折りたたむには、（上記のcssに記載されているように）を設定する必要divがあります。imgdisplay: inline-blockfloatdiv
  4. ＃3のため、それをより「ブロックのように」動作させたい場合は、3番目と4番目のラッパーのようにdiv追加のラッパーを与える必要があります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>
于 2012-12-13T03:05:19.880 に答える
2

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

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

異なるアスペクト比を取得したい場合は、srcただしを使用する必要があります。16：9の比率にしたい場合は、画像の16px幅を広くして9px高くする必要があります（できるだけ小さくする）

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

img対。padding-bottom

これは、バージョンの互換性がどれだけ高いかを示すためのフィドルimgです（値も簡単に処理できpxます（間隔によって毎秒「正方形」のサイズが変更されます）

パーセンテージ値を使用する場合、両方の手法で同じ結果を得ることができますが、パディングバージョンでは追加のマークアップは必要ありません（<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;
}
于 2013-10-29T23:09:44.260 に答える
1

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

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

どこでも使用できます

squareElement(document.querySelector('your-selector'));
于 2015-01-14T11:41:18.837 に答える
0

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

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

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

CSSのみの解決策は、最後の「コンテンツでサイズ変更」の更新でここにあります。
円には適用されますが、を削除しborder-radius: 50%て正方形で機能させることができます。

于 2012-12-13T02:31:21.233 に答える
0

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

于 2012-12-13T02:32:05.180 に答える