Объектно-форме: содержать при сохранении соотношения сторон

Question

Предполагая, что у меня есть следующий код:

<div id='container'> 
    <div id='content'> 
    </div> 
</div> 

И CSS:

#container { 
    width: 100%; /* container fills window */ 
    height: 100%; 
    max-width: 1000px; 
} 
#content { 
    width: 100%; 
    padding-top: 66%; /* (1.5:1 aspect ratio */ 
    object-fit: contain; 
} 

Это поведение я хочу (даже без object-fit) всякий раз, когда Формат просмотра браузера меньше 1.5:1. Я бы хотел, чтобы элемент #container всегда оставался полностью в поле зрения, а также поддерживал соотношение сторон.

Возможно ли это в чистом css (я не против добавления дополнительных элементов)?

Я не хочу использовать vw и vh, потому что ширина контейнера ограничена max-width.

Answer 1

Кажется, что вы хотите что-то вроде этого:

body { 
 
    margin: 0; 
 
} 
 
#container { 
 
    position: relative; /* Containing block for absolutely positioned descendants */ 
 
    float: left; /* Shrink-to-fit width */ 
 
    background: red; 
 
} 
 
#container > canvas { 
 
    display: block; /* Avoids vertical-align problems */ 
 
    max-width: 100%; /* Like object-fit:contain (part 1) */ 
 
    max-height: 100vh; /* Like object-fit:contain (part 2) */ 
 
} 
 
#content { 
 
    position: absolute; /* Take it out of flow */ 
 
    top: 0; right: 0; bottom: 0; left: 0; /* Same size as containing block */ 
 
    overflow: auto; /* In case its contents are too big */ 
 
}

<div id='container'> 
 
    <canvas width="1000" height="666"></canvas> 
 
    <div id='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nulla augue. Vivamus hendrerit arcu id fermentum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non efficitur eros. Mauris pulvinar tortor eros, vitae mollis est suscipit non. Sed accumsan mi vel odio sollicitudin sagittis. Curabitur euismod justo et lorem suscipit tempus.Fusce enim metus, maximus sed lacinia ut, ultrices eu arcu. Vivamus interdum ex ac justo pretium pulvinar. Integer ornare vulputate ligula nec imperdiet. Sed suscipit nisi metus. Aliquam massa ante, dapibus laoreet mauris et, dignissim malesuada urna. Vivamus eleifend pellentesque nisl vitae laoreet. Phasellus a fringilla mauris. Nunc condimentum dui est, eget lobortis ipsum feugiat dictum. Vivamus ultricies, nisi ac gravida luctus, leo augue pulvinar massa, sit amet dictum eros magna at justo. Vivamus eu felis a ipsum auctor imperdiet. Donec eget bibendum tortor. Pellentesque mollis, orci ac molestie mollis, mi eros commodo magna, ac rutrum tellus ipsum in tortor. Nulla vel dui egestas, iaculis felis id, iaculis sem.Vivamus vel varius magna. Vestibulum vulputate massa quis urna finibus rhoncus. Etiam varius in dui fermentum venenatis. In fermentum enim sed laoreet porta. Proin sit amet auctor sapien, eu dapibus nunc. Praesent malesuada leo nec libero interdum efficitur. Nulla ipsum est, tristique ut malesuada id, blandit at odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ac ipsum tristique, feugiat justo eu, pellentesque odio.</div> 
 
</div>

Он использует холст с атрибутом width равным максимальной требуемой ширины, и его атрибут height задается соотношением сторон. Затем это стиль с max-height: 100vh и max-width: 100% для достижения чего-то вроде object-fit: contain.

С #container имеет height: auto и float: left, его размер будет таким же, как на холсте.

Затем вы можете добавить контент внутри абсолютно позиционированного элемента с таким же размером, как #container.