Поддерживать соотношение сторон с фиксированной высотой

Question

Так что я хочу поддерживать конкретное соотношение сторон div, где высота фиксирована. В прошлом я сделал это, но только при использовании фиксированной ширины, как это:

.one-one { 
    position: relative; 
} 
.one-one:before { 
    display: block; 
    content: " "; 
    width: 100%; 
    padding-top: 56.25%; 
    /* Ratio of 16:9 (16w:9h) 
    * (h/w) * 100 = % 
    * (9/16) * 100 = % 
    * 0.5625 * 100 = 56.25% 
    * 1:1 = 100% 
    */ 
} 

Так вот, как я хотел бы сделать это, используя фиксированную ширину 100% в этом примере. Однако на этот раз я хочу сделать макет iPhone, где фиксированная высота 100%, а соотношение составляет 4: 7 (4w: 7h). Используя фиксированную высоту, я могу установить высоту 100% и максимальную высоту 100%, чтобы она не переполняла страницу, сохраняя при этом соотношение 4: 7. Итак, кто-нибудь знает, как вы это сделаете? Либо используя этот метод, либо другой метод.

Спасибо за помощь!

Answer 1

Вы можете:

• Место заменяемый элемент с требуемым отношением внутри вашего целевого элемента.

  Например, это может быть изображение с требуемыми внутренними размерами или холстом.

  Смените этот замененный элемент на height: 100% так, чтобы он охватывал весь элемент цели.

  Пусть у него есть значение по умолчанию width: auto, так что его ширина соответствует соотношению сторон.

  Стиль с display: block, чтобы избежать проблемы extra space below image.

• Сделать целевой элемент использовать алгоритм shrink-to-fit width для расчета его ширины, чтобы он «наследовал» соотношение сторон заменяемого элемента.

  Например, вы можете достичь этого путем его плавания или с помощью display: inline-block.

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

  Сделайте эту обертку размером с целевой элемент с top:0; right:0; bottom:0; left:0 и сделайте целевой элемент его относительным контейнером.

Это должно сработать. Однако по какой-то причине браузеры, похоже, не обновляют ширину при изменении размера окна, поэтому он работает только на начальном этапе. Эта проблема решается с помощью Rerender с JS.

var s = document.getElementById('aspect-ratio'), 
 
    p = s.parentNode, 
 
    n = s.nextSibling; 
 
window.addEventListener('resize', function() { 
 
    // Force a rerender 
 
    p.removeChild(s); 
 
    p.insertBefore(s, n); 
 
});

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#aspect-ratio { 
 
    height: 100%;  /* Some fixed height */ 
 
    float: left;  /* Shrink-to-fit width */ 
 
    position: relative; /* Containing block for #contents */ 
 
    background: orange; 
 
} 
 
#aspect-ratio > canvas { 
 
    height: 100%;  /* Span #aspect-ratio entirely */ 
 
    display: block;  /* Remove space below canvas */ 
 
} 
 
#aspect-ratio > #contents { 
 
    overflow: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div id="aspect-ratio"> 
 
    <canvas height="16" width="9"></canvas> 
 
    <div id="contents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</div> 
 
</div>