How to embed PDF file with responsive width

emersonthis picture emersonthis · May 9, 2013 · Viewed 143.2k times · Source

I'm embedding pdf files using something like this:

<div class="graph-outline">
    <object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
    <embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
    </object>
</div>

It works but I want to set the pdf width to match the width of the containing div. Currently it shows up like an iframe with scrollbars, so to view the entire pdf, you have to scroll right to left. I want the pdf to fit the width of the container.

How do I fix this? I'm supporting IE8 and up.

Here is a jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/

Answer

dhanasekar picture dhanasekar · Jun 20, 2014

Simply do this:

<object data="resume.pdf" type="application/pdf" width="100%" height="800px"> 
  <p>It appears you don't have a PDF plugin for this browser.
   No biggie... you can <a href="resume.pdf">click here to
  download the PDF file.</a></p>  
</object>