Масштабирование ширины div в зависимости от высоты

Я хочу, чтобы сайт, на 100% превышающий высоту браузера, с масштабированием по ширине с соотношением сторон при изменении высоты.

Я могу добиться этого, используя новый модуль vh: http://jsbin.com/AmAZaDA/3 (изменение размера браузера)

<body>
    <div></div>
</body>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

div {
    height: 100%;
    width: 130vh;
    margin: 0 auto;
    background: #f0f;
}

Однако я беспокоюсь о резервном исправлении для IE8 и Safari, так как этот модуль там не поддерживается.

Существуют ли другие CSS только методы достижения этого эффекта?

Ответ 1

У меня есть решение, которое работает также с IE8 (с использованием Pure CSS 2.1), но не идеально. потому что мне нужно, чтобы браузер пересчитывал вещи, когда он менялся, и, по-видимому, он этого не делает, если только он не должен (и я не могу найти способ заставить его думать, что он должен), поэтому вам придется обновить страницу после изменение размера.

насколько я знаю, единственный элемент, который может масштабировать свое отношение, равен <img>, поэтому мы будем использовать <img> в наших интересах.

SO, мы собираемся использовать изображение с требуемым соотношением (используя сервисы placehold.it), скажем, мы хотим соотношение 13X10 (как в вашем примере), поэтому мы будем использовать <img src="http://placehold.it/13x10" />. это изображение будет иметь фиксированную высоту 100% тела, и теперь ширина изображения масштабируется относительно отношения. поэтому ширина изображения равна 130% высоте тела.

это изображение заключено в div, а div имеет inline-block отображение, поэтому он берет точно размер своего контента. ведьма - это нужный размер.

мы удаляем изображение с экрана с помощью visibility: hidden; (не display:none;, потому что нам нужно, чтобы изображение занимало пробел), и мы создаем еще один абсолютный div, который будет содержать фактический контент, который будет находиться прямо над изображение (100% ширина и 100% высота общего контейнера).

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

Вот полный HTML:

<div class="Scalable">
    <img class="Scaler" src="http://placehold.it/13x10" />
    <div class="Content"></div>
</div>

и этот простой CSS:

html, body, .Content
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body
{
    text-align: center;
}

.Scalable
{
    position: relative;
    display: inline-block;
    height: 100%;
}

.Scaler
{
    width: auto;
    height: 100%;
    margin-bottom: -5px;
    visibility: hidden;
}
.Content
{
    position: absolute;
    top: 0;
    background-color: black;
}

Здесь Fiddle (не забудьте обновить после изменения размера) Я рекомендую вам скопировать этот код на свой локальный компьютер и попробовать его там, а не внутри скрипта.

Ответ 2

В этом аналогичном SO-вопросе была найдена техническая технология и объяснена на эта запись в блоге, которая позволяет элементу регулировать его высоту в зависимости от ее ширины. Вот отрывок кода:

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS

#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 /* show me! */
}

Демо здесь

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

Ответ 3

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

CSS

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
 }

img {
    width: 100%;
    height: 100%;
    position: absolute;
   left: 0;
 }