Creating a dynamic webpage requires that the individual components be dynamic. Resizing PDF, Flash, iframe, embedded objects, and other items can often be difficult. JavaScript is powerful and many people rely on it for hard problems. The following method, however, only uses HTML and style sheets.
HTML
<div class="embed-make-fluid embed-size-pdf ">
<embed type="application/pdf" src="/path/filename.pdf"></embed>
</div>
Style sheet
.embed-make-fluid{border-radius:0;
height:0;
padding:0;
position:relative;}
.embed-size-pdf{height:200%;
padding-bottom:66.667%;}
.embed-make-fluid>*{height:100%;
left:0;
position:absolute;
top:0;
width:100%;}
Some limited notes
- Example page
- By using different classes named “embed-size-TYPE”, you can reuses this code for different types of objects
- If possible, use a semantically meaningful container instead of DIV
- Remember that HEIGHT is relative to the size of parent container. You may need to adjust the value 200% for your style sheet
- If your users have very small screens or very large screens, you might want to use maximum and minimum sizes, but that would, of course, mean your page is not 100% dynamic
