2

Bootstrap のグリッド システムを使用しており、<iframe>幅を 90% に設定しています。

問題は、<iframe>accrodingly の高さをどのように設定できるかです。たとえば、16:9 のサイズが必要です。しかし、幅の値を取得する方法がわかりません

コードは次のようになります。

iframe
 width: 90%
 height: $(width)*9/16
4

3 に答える 3

0

これは純粋な CSS で行うことができ、これは固有の比率と呼ばれます。計算を行う必要がありますが、SASS と Compass を使用すると、言いたいことを言うだけで結果を得ることができます! :D

ラッパーが必要です：

<div class=iframe-container>
  <iframe></iframe>
</div>

SASS + コンパス:

@import toolkit

.iframe-container
  +intrinsic-ratio(16/9, 90%)

デモ: http://sassbin.com/gist/5983091/

ご覧のとおり、すばらしいToolkit Compass 拡張機能が使用されています。

于 2013-07-12T09:22:14.633 に答える