如何使PDF文档响应

Question

我正在使用embed标记来返回pdf文档。如何在不使用height标记的width和embed属性的情况下使pdf文档对屏幕做出响应？

这是我到目前为止所尝试但它没有正确显示pdf。请检查下面的codepen链接上的代码：

https://codepen.io/Nick1212/pen/LePKWw

HTML：

<div>
  <embed src='https://gradcollege.okstate.edu/sites/default/files/PDF_linking' />  
</div>

CSS：

.pdf-embed {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  height: 100%;
  width: 100%
  padding: 0;
  overflow: hidden;
}

我还想知道iframe标签是否是更好的解决方案。

更新：请检查codepen链接。但是pdf在改变屏幕尺寸时没有变化。我可以让pdf更大，但Pdf保持相同的大小。

.responsive {
  position: relative;
  padding-bottom: 56.2%;
  height: 0;
  margin: 10px 0;
  overflow: hidden;
}

.responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}