title: Resize pdf object to the parent div size
body: <p>I render .pdf and .png file on a web page.</p>
  
  <pre><code>&lt;table class="table"&gt;
    ...
      &lt;tr ng-if=collapseimg &gt;
        &lt;td colspan="100%"&gt;
          &lt;div ng-if="report._source.attachment &amp;&amp; report._source.attachment.charAt(0) === 'i'"&gt;
            &lt;object data="data:image/png;base64,{{ report._source.attachment }}"&gt;&lt;/object&gt;
          &lt;/div&gt;
          &lt;div ng-if="report._source.attachment &amp;&amp; report._source.attachment.charAt(0) !== 'i'"&gt;
            &lt;object data="data:application/pdf;base64,{{ report._source.attachment }}"&gt;&lt;/object&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Where <code>report._source.attachment</code> is a base64 encoded string, for example, pdf string starts <code>JVBERi0x...</code> and png string - <code>iVBORw0KGgo...</code>.</p>
  
  <p>My style (less) rules:</p>
  
  <pre><code>  object {
      max-width: 100%;
      max-height: 100%;
      display: inline-block;
    }
  
    embed {
      max-width: 100%;
      max-height: 100%;
      display: inline-block;
    }
  </code></pre>
  
  <p>Image (png) resized correctly. But the style above doesn't produce any effect on pdf. </p>
  
  <p>How to resize pdf to fit the parent div size?</p>
  
  <p>Here is <a href="https://plnkr.co/edit/mBo2OLs79i0b16m7q3gS?p=preview" rel="nofollow noreferrer">a simulation in plunker</a>. What I need is pdf and png of the same size without hardcoding <code>width</code> and <code>height</code>.</p>