web-dev-qa-db-ja.com

高さに応じてdivアスペクト比を維持する

要素のwidthをそのheightのパーセンテージとして維持する必要があります。したがって、高さが変わると、幅が更新されます。

その逆は、パディング上部の％値を使用して達成できますが、パディング左のパーセンテージは、オブジェクトの高さではなく幅のパーセンテージになります。

したがって、次のようなマークアップを使用します。

<div class="box">
  <div class="inner"></div>
</div>

私はこのようなものを使いたいです：

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

ボックスのアスペクト比は高さに応じて維持されますを保証します。マージンのため、高さは流動的です。ウィンドウの高さが変わると、ボックスの高さも変わります。

JavaScriptでこれを実現する方法を知っていますが、CSSのみのクリーンなソリューションがあるかどうか疑問に思いますか？

cssresponsive-designaspect-ratio
28
Fijjit

プロポーショナルサイジングに役立つように、希望のプロポーションを持つ画像を使用できます（画像は、1つのディメンションをある値に設定し、他のディメンションをautoに設定することでプロポーショナルにスケーリングできます）。画像は表示される必要はありませんが、スペースを占める必要があります。

.box {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
}
.size-helper {
  display: block;
  width: auto;
  height: 100%;
}
.inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 153, .8);
}
<div class="box">
  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
  <div class="inner">
    1. box has fluid height<br>
    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
    2.1 it thus maintains width = 200% of height<br>
    2.2 it defines the dimensions of the box<br>
    3. inner expands as much as box
  </div>
</div>

上記の例では、ボックス、インナー、ヘルパーはすべて同じサイズです。

24
Salman A

要素の高さと幅の両方にvh単位を使用できるため、両方ともビューポートの高さに応じて変更になります。

vhビューポートの高さの1/100。 （ [〜＃〜] mdn [〜＃〜] ）

[〜＃〜] demo [〜＃〜]

.box {
    position: absolute;
    height:50vh;
    width:100vh;
    bottom: 0;
    background:teal;
}
<div class="box"></div>
15
web-tiki

あなたが書いたCSSトリックは、要素の比率width/heightを維持するのにかなりうまく機能します。これはpaddingプロパティに基づいており、その値がパーセントの場合、padding-topとpadding-bottomであっても、親の幅に比例します。

親の高さに比例して水平方向のサイズを設定できるCSSプロパティはありません。だから私はきれいなCSSソリューションはないと思います。

5
tzi

高さに応じて一定のアスペクト比を実現する別のより効率的な方法があります。

空のsvgを配置できるので、外部イメージをロードする必要はありません。

HTMLコード：

    <svg xmlns="http://www.w3.org/2000/svg"
      height="100"
      width="200"
      class='placeholder-svg'
    />

CSSコード：

.placeholder-svg {
  width: auto;
  height: 100%;
}

幅/高さを変更して、目的のアスペクト比を実現します。

Svgがオーバーフローする可能性があることに注意してください。

http://www.w3.org/2000/svgは単なる名前空間です。何もロードしません。

placeholder-svgクラスを次のように変更した場合：

.placeholder-svg {
  width: 100%;
  height: auto;
}

次に、幅に応じて高さが調整されます。

デモ1 幅は、高さと2：1のアスペクト比に従って調整されます。

Demo 2 上記と同じですが、簡単にサイズ変更できます（Reactを使用）

1
Daniel

純粋なCSSソリューションが見つかりません。 CSS Element Queries JavaScriptライブラリを使用したソリューションを次に示します。

var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() {
  element.style.width = (element.clientHeight * aspectRatio) + 'px';
}

new ResizeSensor(element, update);
update();

CodePenデモ！

0
Neal Ehardt