Search code examples
htmlcssscaleobject-fit

object-fit: contain doesnt fit an A4 size div in a smaller element

I am trying to fit an A4 size div in a smaller element. I thought about using object-fit: contain; for this. When I read the doc on MDN, it seems perfect for my need. The auto-scale is sweet. I guess I forgot something somewhere.

Try it online!

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>

Note I am not able to use grid.

Solution

  • It doesnt fit and it is a normal behavior.

    The object-fit CSS property specifies how the contents of a replaced element, such as an <img> or <video>, should be resized to fit its container.

    Your div is not a replaced elements.

    Typical replaced elements are:

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

    Some elements are treated as replaced elements only in specific cases:

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

    source: