html - CSS:防止 div 容器缩放或拉伸(stretch)

Question

我正在为我的网站创建一个导航器，它有 5 个按钮:Button1-4 和 background-image 作为 Button5。

如果您使用宽度最大化浏览器窗口并仅按高度缩小它，例如 1280x300，您会看到 div 容器背景从按钮中消失，这看起来很糟糕，请查看结果here .

根据我的研究，我已经尝试了所有可能的选项但似乎不起作用，div menu 样式:

.menu {
    position: fixed;
    display: inline-block; /* did not work */
    overflow: auto; /* did not work */
    top: 0%;
    left: 0%;
    right: 0%;
    background-color: black;
    height: 100%;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-radius: 3%;
    z-index:99;
    max-height: 15%; /* non of these below worked. */
    max-width: 100%;
    min-height: 15%;
    min-width: 100%; 
}

为什么即使它超过了 max 和 min 宽度，它也会随着窗口向下拉伸(stretch)？我怎样才能避免我的 div 菜单随浏览器拉伸(stretch)和缩放？ css 有哪些选项？

Full code .

Answer 1

为防止div 容器拉伸(stretch)，在定义宽度和高度时，不要使用%，因为这意味着div 的宽度和高度会根据浏览器窗口的宽度和高度而变化。使用 px 代替，你不应该有这样的问题。

.menu {
  display: inline-block;
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    background-color: black;
    height: 100px;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-radius: 3%;
    z-index:99;
}`

这应该有效。 你可以在这里看到变化: https://jsfiddle.net/4bm2kxxj/4/

同样的事情也可以用按钮来完成，给出边距、宽度和高度 px 值而不是 % 值；

这应该可以解决问题。

一个好主意是在您的代码中使用媒体查询来在特定条件为真时更改元素的 css。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

或者像 Bootstrap 这样的框架，其中一切都是预制的，您所要做的就是学习如何在您的元素中使用它。