不管内容如何。

有可能做到吗?


当前回答

使用Fullscreen API和:Fullscreen伪选择器,任何元素都可以切换全屏模式。

注意:

Stackoverflow不允许全屏模式(document.fullscreenEnabled),因此代码段不能在这里演示requestFullscreen()方法。

我认识到这个问题不需要jQuery。我正在使用一个库来简化事件绑定。当然,香草JS也可以代替。

const ns = { img_click: (e) => { if (document.fullscreenElement) { document.exitFullscreen(); console.log('exited fullscreen'); } else { console.log('entering fullscreen'); e.currentTarget.requestFullscreen(); } } }; $('body').on('click', 'img', ns.img_click); console.log('Fullscreen allowed:', document.fullscreenEnabled); .gallery { display: flex; gap: 1em; } img { width: 100px; aspect-ratio: 1/1; border-radius: .5em; cursor: zoom-in; object-fit: cover; } img:fullscreen { width: 100%; aspect-ratio: auto; object-fit: contain; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery"> <img src="https://picsum.photos/id/123/500/250" alt="Random image" /> <img src="https://picsum.photos/id/234/250/500" alt="Random image" /> <img src="https://picsum.photos/id/345/500/500" alt="Random image" /> </div>

引用:

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

其他回答

将body元素更改为一个flex container,将div更改为一个flex item:

身体{ 显示:flex; 身高:100 vh; 保证金:0; } div { flex: 1; 背景:棕褐色; } < div > < / div >

这是基于vh的最短解。请注意,vh在一些较旧的浏览器中不受支持。

更新:自从我发布这篇文章已经四年了。与此同时,大多数浏览器都应该支持这一点。

CSS:

div {
    width: 100%;
    height: 100vh;
}

HTML:

<div>This div is fullscreen :)</div>

嘿,这招对我很管用

# splashScreen { 背景颜色:白色; 位置:绝对的; 上图:0 px; 左:0 px; 宽度:100%; 高度:100%; 溢出:汽车; max-width: 2000 px; }

这对我来说总是有效的:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

这可能是这个问题最简单的解决方案。只需要设置四个CSS属性(虽然其中一个只是为了让IE高兴)。

我发现最优雅的方法是像下面这样,这里最技巧的是使div的位置:固定。

.mask { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; } <html> <head> <title>Test</title> </head> <body> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <div class="mask"></div> </body> </html>