Question

问题：下面的图表只是部分全屏。如何在全屏时拉伸此元素以填充屏幕的整个可视区域？

我正在使用的全屏功能：

function toggleFullscreen(elem) { //function to make element (cell) fullscreen on most browsers
      elem = elem || document.documentElement;
      if (!document.fullscreenElement && !document.mozFullScreenElement &&
        !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } 
    }

回拨到全屏：

var $saved_cell = $('.cell.code_cell.rendered.selected > div.output_wrapper > div.output > div > div.output_subarea.output_html.rendered_html');

$saved_cell.each(
        function() { toggleFullscreen(this) } ).css({
            'background-color' : 'rgb(244,244,244)',
            'position': 'absolute',
            'z-index': '9999',
            'min-width': '100%',
            'height': '100vh',
            'margin': '0',
            'padding': '0',
            'overflow': 'auto'
        }); //expand selected cell

此外，这是围绕所选元素的DOM的屏幕截图：

Answer 1

您需要更改或删除图形<svg>项目本身设置的宽度和高度。只需将div放大，就不会自动调整图形大小。

可能更简单（在我看来）的替代方法可能是从<div class="svg-container" ...>复制子节点并将它们放入另一个容器中，该容器可以是100％，您可以只显示/隐藏，修改复制的<svg>元素的宽度和高度，以便它们不被修复，并全屏切换视图。这样你就不会搞砸正常的＆＃39;可能想要维护的视图。

你可以使用JQuery的 .find() 和 .clone() 来获取上面提到的div（而不是试图走讨厌的结构）并在你想要以100％显示的空间中制作副本。然后根据需要操纵<svg>宽度和高度。

元素没有完全全屏

1 个答案: