小分辨率下网页元素超出屏幕问题求助（非移动端）

先看你代码里的几个明显问题，这些是导致元素超出屏幕的主要原因：

1. CSS语法错误 #

• #maincontainer2里的max-width: 100%后面没加分号，导致后续max-height:100%不生效
• body里的box-sizing: border-box后面没加分号，margin:0被忽略
• CSS不存在float:middle属性值，float仅支持left/right/none三种取值

2. HTML标签语法错误 #

• <img>标签样式直接写在标签内，未包裹在style属性中，且重复定义height属性，语法混乱

3. 布局逻辑问题 #

• body设置display: table无必要，反而干扰正常块级布局
• 未给html设置高度，body的height:100%无法继承正确高度
• 图片绝对定位未与容器关联，容易出现溢出

修改后的代码 #

CSS部分

html {
  height: 100%; /* 让body能继承全屏高度 */
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden; /* 禁止横向滚动，避免元素溢出 */
}

#maincontainer2 {
  position: relative;
  box-sizing: border-box;
  background-repeat: no-repeat;
  min-height: 100vh; /* 用vh确保容器至少占满视口高度 */
  width: 100%;
  max-width: 100%;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
}

/* 媒体查询：仅针对移动端（屏幕宽度小于768px）做特殊处理，可自行调整阈值 */
@media (max-width: 767px) {
  #maincontainer2 {
    /* 此处编写移动端专属样式，比如缩小内边距等 */
    padding: 10px;
  }
}

HTML部分

<div id="maincontainer2" class="container-fluid">
  <!-- 将背景图放入容器内部，与容器关联定位 -->
  <img 
    src="https://media.discordapp.net/attachments/794994238038605904/998116976310353930/the_bg.png" 
    style="object-fit: contain; position: absolute; box-sizing: border-box; width:100%; height:100%; left:0; top:0;"
    alt="背景图"
  >
</div>

关键调整说明 #

• 给html和body清除默认边距并设置全屏宽高，确保布局从视口边缘开始
• 用min-height:100vh替代height:100%，vh是视口高度单位，能保证容器始终占满屏幕高度，不会因内容不足收缩
• 给body加overflow-x:hidden，强制隐藏横向滚动条，避免元素溢出导致的滚动
• 将背景图放入容器内部，通过绝对定位相对于容器定位，确保图片不会超出容器范围
• 添加媒体查询，可按需调整移动端阈值，仅在小屏设备下做特殊处理，非移动端保持全屏适配

调整后，除移动端外，台式机、笔记本等设备上的元素均不会超出屏幕，可自适应不同分辨率。

内容的提问来源于stack exchange，提问作者Galehaut