如何在只有浏览器最大化时全屏显示 div

Question

我想让我的 div 宽度为 100%，但我希望宽度是静态的，这样当调整浏览器大小时水平滚动会出现（当浏览器最大化时不会出现） ) 所以我不想用 width:100% 设置宽度属性并且我不想从 window.screen 中获取这个值，因为它给你的是全屏宽度而不是最大化的浏览器宽度所以当浏览器没有最大化时，我不想像这个图像

我想要这样

当浏览器最大化时会像（没有水平滚动）

Answer 1

使用 window.innerWidth 和 screen.width（这为您提供了最大的浏览器宽度）。使用条件来决定何时显示水平滚动条（例如通过在 body 标签上切换 class）并将这段代码包装在 onresize 侦听器中。

Answer 2

您 [可能] 使问题复杂化了。您拥有的是一定宽度的背景（或 div 容器），但您不希望它超过该宽度，因此，请使用 CSS3宽度规则：

.div_background-image-container {
    width:100%; /* of whatever the screen size*/
    min-width:320px; /* For mobile devices or a size that you need */
    max-width:800px; /* The maximum size of this image */ 
    margin:auto; /* Centre the div*/
    display:block;
}

在此 div 中，您还可以设置背景图像并使用 contain 的 CSS3 背景大小属性进行设置，其中图像将覆盖背景 space.您也可以使用 cover，具体取决于哪个看起来最适合您的情况。参见 http://www.w3schools.com/cssref/css3_pr_background-size.asp。

.div_background-image-container {
    background: url(fingers_in_the_air.jpg);
    background-size: contain; /* OR cover, please explore */
    background-repeat: no-repeat;
}

据此，背景容器框的最小宽度为 320px，最大宽度为 800px，并且在这些参数范围内宽度为屏幕的 100%，因此浏览器的大小无关紧要 window 或浏览器分辨率，这些约束将保留图像并根据 background-size CSS 语句按比例显示。

这也避免了 Javascript 和其他事件处理，因为宽度由浏览器自动定义。

如何在只有浏览器最大化时全屏显示 div

How to make a div with full screen when only the browser is maximized

html

css

fullscreen