如何使嵌入的 pdf 文件在我的网站上全屏显示？
[英]How do I make my embedded pdf file to be full screen on my website?
问题描述
This is what I've got but this doesn't solve the problem for different devices and screen sizes.
这就是我所拥有的，但这并不能解决不同设备和屏幕尺寸的问题。
<html>
<body>
<iframe src="FILE LINK" width="1920" height="1080"></iframe>
</body>
</html>
How do I make it full screen?我如何使它全屏？ I've tried width: 100%;我试过宽度：100%； height: 100%高度：100%
2 个解决方案
解决方案1
4 2020-10-01 06:57:34
For reaching fullscreen in this case you need to use height: 100vh;在这种情况下，要达到全屏，您需要使用height: 100vh; , width: 100%; ， width: 100%;
body { margin: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .landing { width: 100%; height: 100vh; } .image-list { margin: 0; padding: 0; list-style: none; width: 100%; height: 100vh; border: 6px solid #00f; overflow: hidden; } .image-list .image { border: 6px solid #f00; width: 100%; height: 400px; background-size: cover; background-position: center center; height: 100vh; } .centered-element { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #fff; padding: 1rem; width: 280px; } .centered-element ul { margin: 0; padding: 0; list-style: none; } .centered-element ul span { opacity: 0.4; }
<!-- body --> <section class='landing'> <ul class='image-list'> <li class='image' style='background-image: url(https://unsplash.it/1600/1600)'> </li> <li class='image' style='background-image: url(https://unsplash.it/1600/1800)'> </li> <li class='image' style='background-image: url(https://unsplash.it/1600/1700)'> </li> </ul> </section> <!-- /body -->
解决方案2
0 2020-10-01 06:59:55
Well, a simple snippet like the following one did the trick for me:好吧，像下面这样的简单片段对我有用：
body { height: 100%; width: 100%; margin: 0; padding: 5px; box-sizing: border-box; } html { height: 100%; }
<iframe src="#" width="100%" height="100%"></iframe>
Just play with the containers.只玩容器。
You should of course set your own container sizes to 100% and not html and body .您当然应该将自己的容器大小设置为 100% 而不是html和body 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.