如何在css中限制屏幕的最大宽度和高度？ [英] How to limit max width and height to screen size in CSS?
本文介绍了如何在css中限制屏幕的最大宽度和高度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试做一个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> 这篇关于如何在css中限制屏幕的最大宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
