不管内容如何。
有可能做到吗?
当前回答
使用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
其他回答
这就是我使用的技巧。适合响应式设计。工作完美时，用户试图与浏览器调整大小混乱。
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">some content</div>
</body>
这是我创建一个全屏div的解决方案，使用纯css。 它在滚动时显示一个持久的全屏div。 如果页面内容适合屏幕，页面就不会显示滚动条。
在IE9+， Firefox 13+， Chrome 21+测试
<！doctype html > < html > < >头 <meta charset="utf-8" /> <title>全屏Div </title> . <时尚> .overlay { 位置:固定; 宽度:100%; 高度:100%; 左:0; 上图:0; 背景:rgba(51岁,51,51岁,0.7); z - index: 10; ｝ > < /风格 > < /头 <身体> <div class='overlay'>可选文本 <p>这个段落位于覆盖层的下面，因此不能被选择:) 身体< / > < / html >
这是基于vh的最短解。请注意，vh在一些较旧的浏览器中不受支持。
更新:自从我发布这篇文章已经四年了。与此同时，大多数浏览器都应该支持这一点。
CSS:
div {
width: 100%;
height: 100vh;
}
HTML:
<div>This div is fullscreen :)</div>
这应该工作，虽然我没有IE测试。
<html>
<head>
<title>Hellomoto</title>
<style type="text/css">
.hellomoto
{
background-color:#ccc;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
}
body
{
background-color:#ff00ff;
padding:0px;
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
.text
{
background-color:#cc00cc;
height:800px;
width:500px;
}
</style>
</head>
<body>
<div class="hellomoto">
<div class="text">hellomoto</div>
</div>
</body>
</html>
我发现最优雅的方法是像下面这样，这里最技巧的是使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>
