对象适合：在保持宽高比的同时包含

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>

它使用 canvas，其 width 属性设置为所需的最大宽度，其 height 属性由纵横比指定。然后用 max-height: 100vh 和 max-width: 100% 设置样式以实现类似 object-fit: contain.

的效果

由于 #container 有 height: auto 和 float: left，它的大小将与 canvas 相同。

然后你可以在绝对定位元素中添加一些内容，其大小与#container相同。

对象适合：在保持宽高比的同时包含

Object-fit: contain while maintaining aspect ratio

css

aspect-ratio