如何在css中限制屏幕的最大宽度和高度？

2022-04-10 00:00:00 limit html css screen-size

我正在尝试做一个php画廊，这就是为什么我需要一个好的面具，在那里可以稍后展示图片。我希望面具不要超过屏幕大小。我的意思是，不能有滚动，整个<body>只需要浏览器窗口的宽度和高度，这样<body>中的每个子对象都被限制在浏览器的边框大小，如果溢出，将被缩小。我已尝试在<body>上使用max-width和max-height，但不起作用。

以下是我的index.html文件的内容：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="mother">
    <div id="header">
      <div id="back-link">
        <a href="../">Home</a>
      </div>
      <div id="prev">
        <a href="">next picture</a>
      </div>
      <div id="next">
        <a href="">previous picture</a>
      </div>
      <div id="headline">
        <p class="h2">Our Galery</p>
      </div>
    </div>

    <!-- Content -->
    <div id="container-bild">
      <img src="./bilder/P1130079.JPG" id="img-bild" />
    </div>
  </div>
</body>
</html>

以下是我的style.css文件的内容：

body {
  max-width: 100%;
  max-height: 100%;
}

/* mother-container */
div#mother {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/* main-container */
#container-bild {
  max-width: 100%;
  max-height: 100%;
}

/* picture in main-container */
#img-bild {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid #280198;
}

这是它的屏幕截图：

解决方案

若要将高度和宽度设置为窗口(视区)大小的100%，请使用：

height: 100vh;//100% view height
width: 100vw;// 100% view width

。

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

div {
  background-color: blue;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}

<div>some content here</div>

相关文章