我正在尝试将 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>
注意我无法使用网格。
最佳答案
不合适,这是正常现象。
The
object-fit
CSS property specifies how the contents of areplaced element
, such as an<img>
or<video>
, should be resized to fit its container.
您的 div 不是替换元素。
Typical replaced elements are:
<iframe> <video> <embed> <img>
Some elements are treated as replaced elements only in specific cases:
<option> <audio> <canvas> <object> <applet>
来源:
关于html - object-fit: contain 不适合 A4 大小的 div 在较小的元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51234617/