Как реализовать пропорциональное масштабирование div блока?

Question

[nepster-web]

Возникла следующая задача, нужно сделать квадрат по центру экрана, который бы пропорционально масштабировался.

Тоесть:
К примеру у нас расширение экрана браузера более 2000px. В центре расположен квадрат исходя из этого:

#table {
    width: 100%;
    max-width: 1024px;
    min-width:424px;
    height:770px;
    position: relative;
    margin: 0 auto;
    border: solid 1px red;
}

1024px на 770px

если расширение браузера к примеру уменьшается и становиться 900px, то данный квадрат получит следующие атрибуты:
width: 900px(100%) а вот height должно быть пропорционально width. Тоесть нужно при каждом ресайзе вычислять height таким образом, что бы он был пропорционален width

Подскажите пожалуйста как это можно сделать?

Answer 1

[Юрий Лобанов]

1.

расширение

- это разрешение
2. Ваш квадрат на самом деле прямоугольник
3. Вот jsfiddle.net/iiil/4PFt7 вам

Comments

[nepster-web]

Вариант, спасибо. Только переписал на чистый js

Answer 2

[Wach Every]

position: absolute?

Answer 3

[Wach Every]

А вообще, вроде бы вот что вы искали: www.programmersforum.ru/showthread.php?p=1084798

Comments

[nepster-web]

а может что то с js ?

[Wach Every]

jquerylist.ru/image-viewer/imgcenter.html для картинок. Вам надо контент (например, изображения) ужать или сам блок (!зачем!)?

Answer 4

[Первый Веб Сервис 1вс.рф]

height:770px;
на
height:100%;