如何在 CSS 中将最大宽度和高度限制为屏幕尺寸？答案

【问题标题】：How to limit max width and height to screen size in CSS?如何在 CSS 中将最大宽度和高度限制为屏幕尺寸？
【发布时间】：2016-07-15 04:56:24
【问题描述】：

我正在尝试制作一个 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;
}

这是它的截图：

【问题讨论】：

标签： html css limit screen-size

【解决方案2】：

试试：

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
}

您知道您的图库中有多少子元素吗？如果元素的数量是静态的，您可以简单地使用 vw 和 vh 单位在 CSS 中设置它们的尺寸。不涉及 JavaScript，元素永远不会溢出你的身体。

【讨论】：

也谢谢你，但你的方式也不是我要找的，因为它是正确的，用你的方式我可以防止滚动，但网站上仍然存在溢出......我希望我的网站能够防止此类溢出，这样如果一个对象试图溢出，它将被缩小到不会溢出的合适大小......你知道我的意思吗？
编辑了我的答案，建议使用 vw 和 vh 调整子元素的大小。如果画廊元素是静态的，这将起作用...如果您要动态添加或减少元素，那么 JavaScript 将是唯一的方法。

【解决方案3】：

作为对未来自己的提醒：

.book {
    margin: auto;
    width: 100vh;
    max-width: 100vw;
    min-width: 500px;
}

虽然这完全不相关，但对于链接，您可能希望使用类似：

a[href^="#"] {
    text-decoration: none;
    color: black;
    background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
    text-decoration: underline;
    color: blue;
    background: none;
}

【讨论】：

【解决方案4】：

我不确定这是否可以通过 css 实现，它可能是。我已经用 javascript 解决了类似的问题：

window.top.innerHeight;

获取浏览器的可用高度、排除的菜单栏等。看看我是如何处理高度的，我的问题是即使内容是空的，页脚也应该在底部->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>C-Driver Manager</title>
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz">
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="images/favicon.ico">
</head>

<body onResize="resizecontainer();">
    <div class="divtop"> 
        <div class="divtopcontainer">
            <div class="divlogo">

            </div>
            <div class="divHmenu">
                <style>
    .mnuHorizontal
    {
        list-style:none;
    }
    .mnuHorizontal li
    {
        float:left;
    }

    .mnuHorizontal .activemnu a,.mnuHorizontal li a:hover
    {
        background:#00B7EF;
        border-radius:5px;
        color:white;
    }


    .mnuHorizontal li a
    {
         display:inline-block;
         text-decoration:none;
         padding:5px 12px;
         text-align:center;
         font-weight:bold;
         color:#020042;
    }

    </style>

<ul class="mnuHorizontal">
    <li id="index.php"><a href="index.php">HOME</a></li>
    <li id="features.php"><a href="features.php">FEATURES</a></li>
    <li id="download.php" class="activemnu"><a href="download.php">DOWNLOAD</a></li>
    <li id="contact.php"><a href="contact.php">CONTACT</a></li>
</ul>  
            </div>
        </div>
    </div>

    <div class="divblueline"></div>

    <div class="divcontainer">
<div style="float:left">
    <h2>What is C-Driver Manager</h2>
    C-Driver Manager is a simple tool that;
    <ul>
        <li>displays information about your devices</li>
        <li>identify unrecognized devices by windows</li>
        <li>Backups your devices driver</li>
    </ul>

<h2>Why C-Driver Manager?</h2>
<ul>
    <li>No installation needed</li>
    <li>No adware</li>
    <li>No spyware</li>
    <li>Absolutely freeware</li>
</ul>
</div>
<div>
    <img alt="" src="images/devmgr5.jpg" height="430" width="700">
</div>

</div>

    <div class="divblueline"></div>
    <div class="divbottom">
        <div id="chmx">
        </div>
    </div>
</body>
    <script>
        for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++)
        {
            if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id ==
                "index.php")

            {
                document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu';
            }
            else
            {
                document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = '';
            }
        }

        resizecontainer();

        function resizecontainer()
        {
            avh     =   window.top.innerHeight;
            dbh     =   document.getElementsByClassName('divbottom').length *
                        document.getElementsByClassName('divbottom').item(0).clientHeight;

            dbt     =   document.getElementsByClassName('divtop').length    *
                        document.getElementsByClassName('divtop').item(0).clientHeight;

            dbbl    =   document.getElementsByClassName('divblueline').length   *
                        document.getElementsByClassName('divblueline').item(0).clientHeight;

            decrh = dbh + dbt + dbbl;

            document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
        }
    </script>
</html>

在上面的例子中寻找这个函数 ->

function resizecontainer()
        {
            avh     =   window.top.innerHeight;
            dbh     =   document.getElementsByClassName('divbottom').length *
                        document.getElementsByClassName('divbottom').item(0).clientHeight;

            dbt     =   document.getElementsByClassName('divtop').length    *
                        document.getElementsByClassName('divtop').item(0).clientHeight;

            dbbl    =   document.getElementsByClassName('divblueline').length   *
                        document.getElementsByClassName('divblueline').item(0).clientHeight;

            decrh = dbh + dbt + dbbl;

            document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
        }

【讨论】：

好的，谢谢...我正在努力与您的想法相处 ^^ 因为，实际上我在 javascript 方面非常糟糕...我的意思是我在寻找一种方法，没有 javascript ...但是如果没有办法绕过 javascript，那就无能为力了 XD
尝试获取可用高度并排除所有其他元素并将图片大小调整为可用高度和宽度的其余部分顺便说一句，我也不是网站管理员，在stackoverflow中你可以找到很多 javascript 示例。
link 我想这就是你要找的东西

【解决方案5】：

这很好用。这将防止您的图像在宽度上变得过大，并保持其比例。

img {
    max-width: 100%;
    height: auto;
}

【讨论】：

【解决方案6】：

我的 CSS 解决方案是：

position: absolute;
width: 100%;
height: 100%;
overflow: hidden;

【讨论】：