Как автоматически изменить размер DIV с помощью CSS, сохраняя соотношение сторон?

У меня есть стандартная форма в HTML, которая позволяет пользователю выбирать параметр «Ширина» и «Высота» (каждый со значениями от 1 до 10). Когда они отправляют форму, она отправляет ее на PHP / HTML-страницу, где PHP захватывает переменные «Ширина» и «Высота» и присваивает ее ширине и высоте DIV.

Но я пытаюсь просто использовать переменные «Ширина» и «Высота», чтобы назначить соотношение сторон к этому DIV, а затем автоматически увеличивать размер DIV до 100% контейнера, в котором он находится, но при сохранении это же соотношение сторон.

Пример: Пользователь выбирает ширину 4 и высоту 2, затем отправляет форму. На принимающей странице PHP этот DIV (тот, который получает отношения ширины и высоты) находится внутри контейнера с шириной 1000 пикселей и высотой 600 пикселей. Итак, теперь DIV изменяет размер до 1000 пикселей в ширину и высоту 500 пикселей (это будет соотношение сторон от 4 до 2)

Любые идеи, коды, скрипты были бы чрезвычайно полезны, спасибо вам большое!

Аарон

Related of "Как автоматически изменить размер DIV с помощью CSS, сохраняя соотношение сторон?"

Поскольку процентные значения свойств 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>

Вы могли бы воспользоваться тем фактом, что замена элементов может иметь внутреннее соотношение сторон. Согласно спецификации ,

В противном случае, если «height» имеет вычисленное значение «auto», а элемент имеет внутреннее отношение, тогда используемое значение «height» равно:

(используемая ширина) / (внутреннее соотношение)

Поэтому вы могли бы

Создайте замененный элемент с требуемым внутренним соотношением, а затем установите width:100% .
Используйте абсолютно позиционирование, чтобы удалить все содержимое из обычного потока элемента, чтобы предотвратить увеличение высоты. Затем заставьте его расти, чтобы заполнить контейнер.

Тогда контейнер контейнера будет иметь требуемое соотношение сторон.

Замененным элементом может быть изображение. Вы можете создавать изображения требуемого соотношения сторон в PHP или использовать сторонний веб-сервис, например http://placehold.it/

В следующем фрагменте я использую ширину ширины 2px и высоту 1px ( введите описание изображения здесь ):

 .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>