锁定页面内容纵横比答案

【问题标题】：Lock page content aspect ratio锁定页面内容纵横比
【发布时间】：2021-01-25 21:31:17
【问题描述】：

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

【问题讨论】：

或者，你可以试试max-width

标签： html css

【解决方案1】：

使用此代码：

<!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>

【讨论】：

是的，但是它对 4k 等更高分辨率没有响应，我想我应该在媒体查询中使用 max-width

【解决方案2】：

好的，我用最简单的方法做到了，在媒体查询中将 max-width 更改为 max-height，例如

const Content = styled.div`
    width: 98%;
    height: 100%;
    @media (max-height: 1080px) {
        max-width: 1920px;
    }
    @media (min-height: 1081px) and (max-height: 1440px) {
        max-width: 2560px;
    }
    @media (min-height: 1441px) and (max-height: 2160px) {
        max-width: 3840px;
    }
`;

【讨论】：