7

私が持っているのは、ユーザーが「幅」オプションと「高さ」オプション (それぞれ 1 から 10 の範囲の値) を選択できる HTML の標準フォームです。フォームを送信すると、PHP/HTML ページに送信され、そこで PHP が「幅」変数と「高さ」変数を取得し、それを DIV の幅と高さに割り当てます。

しかし、私がやろうとしているのは、「幅」変数と「高さ」変数を使用してそのDIVにアスペクト比を割り当て、そのDIVをコンテナの100％に自動サイズ変更することですが、同じ縦横比。

例: ユーザーが幅 4 と高さ 2 を選択し、フォームを送信します。受信 PHP ページでは、その DIV (幅と高さの比率を受け取るもの) は、幅 1000 ピクセル、高さ 600 ピクセルのコンテナー内にあります。これで、DIV のサイズが幅 1000 ピクセル、高さ 500 ピクセルに変更されます (アスペクト比は 4 対 2 になります)。

アイデア、コード、スクリプトは非常に役立ちます。どうもありがとうございました!

アーロン

4

2 に答える 2

8

プロパティのパーセンテージ値はpadding-*、生成されたボックスの包含ブロックの幅に対して計算されるため、次のことができます。

  • 内容のないダミー要素を追加しますが、目的の縦横比に対応する垂直パディング (padding-topまたは) にパーセンテージを指定します。padding-bottom
  • 絶対配置を使用して、要素の通常の流れからすべてのコンテンツを削除し、それらが高さを増やさないようにします。次に、コンテナを満たすように成長させます。

このアイデアはhttp://ansciath.tumblr.com/post/7347495869/css-aspect-ratioから取られています

#container {
  position: relative;
  width: 50%;
}
#dummy {
  padding-top: 75%; /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

垂直パディングの代わりに垂直マージンを使用することもできますが、マージンの崩壊が発生することに注意してください。それを防ぐために、追加します

#container {
  display: inline-block;
}


#container {
  display: inline-block;
  position: relative;
  width: 50%;
}
#dummy {
  margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

疑似要素を使用::beforeすると、ダミー要素を使用する必要はありません。

#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}


#container {
  position: relative;
  width: 50%;
}
#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="element">
    some text
  </div>
</div>

于 2012-08-29T14:52:21.313 に答える
1

replaces 要素には固有のアスペクト比がある可能性があるという事実を利用できます。スペックによると、

それ以外の場合、'height' の計算値が 'auto' で、要素に固有の比率がある場合、使用される 'height' の値は次のとおりです。

(使用幅) / (固有比率)

したがって、次のことができます。

  • 目的の固有比率で置換要素を作成し、それに設定width:100%します。
  • 絶対配置を使用して、要素の通常の流れからすべてのコンテンツを削除し、それらが高さを増やさないようにします。次に、コンテナを満たすように成長させます。

次に、コンテナー コンテナーは、必要な縦横比になります。

置き換えられる要素は画像である可能性があります。PHP で、またはhttp://placehold.it/のようなサードパーティの Web サービスを使用して、目的のアスペクト比の画像を作成できます。

次のスニペットでは、幅 2 ピクセル、高さ 1 ピクセルの画像 ( ここに画像の説明を入力)を使用しています。

.container {
  border: 3px solid blue;
  position: relative;
}
.container > img {
  width: 100%;
  display: block;
  visibility: hidden;
}
.container > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
<div class="container">
  <img src="http://i.stack.imgur.com/Lfmr6.png" />
  <div class="content">
    <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p>
    <p>06</p><p>07</p><p>08</p><p>09</p><p>10</p>
    <p>11</p><p>12</p><p>13</p><p>14</p><p>15</p>
    <p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  </div>
</div>

<canvas>画像の代わりに要素を使用することもできます。この方法では画像を作成する必要はありませんが、古いブラウザー (IE 8 以前など) では機能しません。

<div class="container">
  <canvas height="1" width="2"></canvas>
  <div class="content">...</div>
</div>


.container {
  border: 3px solid blue;
  position: relative;
}
.container > canvas {
  width: 100%;
  display: block;
  visibility: hidden;
}
.container > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
<div class="container">
  <canvas height="1" width="2"></canvas>
  <div class="content">
    <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p>
    <p>06</p><p>07</p><p>08</p><p>09</p><p>10</p>
    <p>11</p><p>12</p><p>13</p><p>14</p><p>15</p>
    <p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  </div>
</div>

于 2012-08-29T03:00:02.040 に答える