代码之家 › 专栏 › 技术社区 › aloisdg

对象匹配:包含在较小的元素中不适合A4大小的DIV

object-fit scale css html

0

aloisdg · 技术社区 · 7 年前

我正在尝试在一个较小的元素中安装一个A4大小的分区。我想用 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>

注意,我不能使用网格。

1 回复 | 直到 7 年前

1

0

aloisdg 7 年前

object-fit replaced element <img> <video>

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

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