Question

我正在尝试在较小的元素中放入A4尺寸的div。我考虑过为此使用object-fit: contain;。当我阅读MDN上的文档时，似乎很适合我的需求。自动缩放很甜。我想我忘记了某个地方。

header {
  background: orange;
  height: 60px;
  width: 100%;
}

aside {
  background: lightblue;
  width: 200px;
}

main {
  background: lightgrey;
  width: 100%;
}

#wrapper {
  width: 100%;
  height: 500px;
  background: white;

}

.block {
  display:flex;
  width: 100%;
  height: 100%;
  background: grey;
}

.pdf {
  background: white;
  width: 21cm;
  height: 297mm;
  object-fit: contain;
}

<div id="wrapper">
  <header>header</header>
  <div class="block">
    <aside>aside</aside>
    <main>
      <div class="pdf"></div>
    </main>
  </div>
</div>

请注意，我无法使用网格。

Answer 1

这不合适，这是正常现象。

object-fit CSS属性指定如何调整replaced element或<img>等内容的大小以适合其容器。

您的div不是替换的元素。

典型的替换元素是：
<video>
某些元素仅在特定情况下被视为替换元素：
<iframe>
<video>
<embed>
<img>

来源：

对象适合：contain不适合较小元素中的A4尺寸div

1 个答案: