How to embed PDF file with responsive width

Question

I m embedding pdf files using something like this    lt div class  graph-outline  gt       lt object style  width 100    data  path to file pdf  zoom 85 amp scrollbar 0 amp toolbar 0 amp navpanes 0  type  application pdf  gt       lt embed src  path to file pdf  zoom 85 amp scrollbar 0 amp toolbar 0 amp navpanes 0  type  application pdf    gt       lt  object gt   lt  div gt    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

User · Answer

lt object data  resume pdf  type  application pdf  width  100   height  800px  gt       lt p gt It appears you don t have a PDF plugin for this browser         No biggie    you can  lt a href  resume pdf  gt click here to        download the PDF file  lt  a gt     lt  p gt     lt  object gt

User · Answer

lt html gt   lt head gt   lt style type  text css  gt   wrapper  width 100   float left  height auto  border 1px solid  5694cf    lt  style gt   lt  head gt   lt div id  wrapper  gt   lt object data  http   partners adobe com public developer en acrobat PDFOpenParameters pdf  width  100   height  100   gt   lt p gt Your web browser doesn t have a PDF Plugin  Instead you can  lt a href  http   partners adobe com public developer en acrobat PDFOpenParameters pdf  gt  Click here to download the PDF lt  a gt  lt  p gt   lt  object gt   lt  div gt   lt  html gt

User · Answer

If you re using Bootstrap 3  you can use the embed-responsive class and set the padding bottom as the height divided by the width plus a little extra for toolbars  For example  to display an 8 5 by 11 PDF  use 130   11 8 5  plus a little extra  20      lt div class  embed-responsive  style  padding-bottom 150   gt       lt object data  URL pdf  type  application pdf  width  100   height  100   gt  lt  object gt   lt  div gt    Here s the Bootstrap CSS    embed-responsive       position  relative      display  block      height  0      padding  0      overflow  hidden

User · Answer

Seen from a non-PHP guru perspective  this should do exactly what us desired to   lt style gt       name   pdf     width 100   height  auto    lt  style gt

User · Answer

I did that mistake once - embedding PDF files in HTML pages  I will suggest that you use a JavaScript library for displaying the content of the PDF  Like https   github com mozilla pdf js

User · Answer

Simply do this    lt object data  resume pdf  type  application pdf  width  100   height  800px  gt      lt p gt It appears you don t have a PDF plugin for this browser     No biggie    you can  lt a href  resume pdf  gt click here to   download the PDF file  lt  a gt  lt  p gt     lt  object gt

User · Answer

x000D   x000D   lt embed src  your pdf  type  application pdf view FitH  width  actual-width px  height  actual-height px  gt  lt  embed gt  x000D   x000D   x000D    Check this link for all PDF Parameters  https   www adobe com content dam acom en devnet acrobat pdfs pdf open parameters pdf page 7  Chrome has its own PDF reader  amp  all parameter don t work on chrome   Mozilla is worst for handling PDFs

[html] How to embed PDF file with responsive width

Examples related to html

Examples related to css

Examples related to object

Examples related to pdf

Examples related to embed