时间戳

首页 > 解决方案 > 锁定页面内容纵横比

html - 锁定页面内容纵横比

问题描述

如何锁定我的页面的纵横比，例如示例？响应 16:9（例如响应 1920x1080 和 2560x1440），但当用户的显示为 21:9 或 32:9 时显示 16:9。我尝试了媒体查询和纵横比，但它不像我想要的那样工作。

例子

标签： htmlcss

解决方案

使用此代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.lock{
  max-height:400px;width:90%;margin:auto;border:1px solid #ddd;overflow:hidden;
}
</style>
</head>
<body>
<div id="wrapper" class="">
<Button id="btnLock" onclick="GetLock()">Get Lock</Button>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">
   <h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">

  <h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>Edit the code in the window to the left, and click "Run" to view the result.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">


</div>
<script>
var lock=false;
function GetLock()
{
   if(lock)
   {
      var element = document.getElementById("wrapper");
      element.classList.remove("lock");
      lock=false;
   }
   else
   {
      var element = document.getElementById("wrapper");
      element.classList.add("lock");
      lock=true;
   }
}
</script>


</body>
</html>

推荐阅读