JS 实现全屏效果

JavaScript023

JS 实现全屏效果,第1张

点击按钮触发 requestFullscreen() 函数打开全屏

点击按钮触发 exitFullScreen() 函数关闭全屏

如果需要监听全屏状态变换，可以监听 fullscreenchange 时间

https://github.com/gywgithub/vue-d3-examples

https://github.com/gywgithub/vue-d3-examples/blob/master/src/views/Examples.vue#L263

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide

设置图片自适应。

首先设置一个div 用来装 img ，div 的宽 为图片的宽，一般使用百分百就可以了，例如

width:100%不要设置高度，让图片自动撑开高度。

然后设置 img 的 width:100%display:block将标签 img 设置为块级元素。

这样不管 div 的宽为多大，图片都是根据 div 等比例缩放。