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

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>或<video>以适合其容器。

您的div不是替换的元素。

典型的替换元素是：

 <iframe> <video> <embed> <img> 

仅在特定情况下，某些元素才被视为替换元素：

 <option> <audio> <canvas> <object> <applet> 

资源：

• 对象拟合
• 替换元素