CSS如何实现容器背景图填充及解决伪元素图片溢出问题

• 原因：object-fit属性仅对<img>、<video>这类替换元素生效，容器的背景图控制需要使用背景相关专属属性，你当前未设置背景图尺寸，默认按图片原始大小渲染，所以无法填满容器。
• 解决步骤：
  1. 删掉.container规则里无效的object-fit: cover属性
  2. 新增background-size属性控制背景图尺寸，若需要保持图片比例铺满容器则设置为cover，若需要完全拉伸适配容器宽高则设置为100% 100%
     修改后的.container代码：

.container {
  background: url(./media/bg-header-mobile.png) no-repeat top;
  background-size: cover; /* 新增控制背景尺寸的属性 */
  width: 23.438rem;
  height: 325.313rem;
  border: 1px red solid;
  margin: 0 auto;
  padding: 9.375rem 2rem;
}

• 原因：::before伪元素默认是行内元素，行内元素设置width属性不生效，同时你直接通过content:url()插入的图片默认按原始尺寸渲染，没有尺寸限制就会超出父容器。
• 解决步骤：
  1. 给.feature2::before新增display: block属性，将伪元素转为块级元素，使宽高设置生效
  2. 新增width: 100%、max-width: 100%限制最大宽度不超出父容器，新增height: auto保持图片比例
  3. 可选：新增overflow: hidden防止内容溢出，新增margin: 0 auto实现图片居中
     修改后的.feature2::before代码：

.feature2::before {
  content: url(./media/image-computer.png);
  border: 1px red solid;
  display: block; /* 新增，转为块级元素使宽高生效 */
  width: 100%; /* 新增 */
  max-width: 100%; /* 新增，限制不超出父容器 */
  height: auto; /* 新增，保持图片比例 */
  overflow: hidden; /* 可选，彻底防止溢出 */
  margin: 0 auto; /* 可选，实现图片居中 */
}

如果需要更灵活控制图片尺寸，也可以换用背景图方式插入：

.feature2::before {
  content: "";
  display: block;
  width: 100%;
  height: 300px; /* 自定义需要的高度 */
  background: url(./media/image-computer.png) no-repeat center;
  background-size: contain;
  border: 1px red solid;
}

额外修复提示 #

你提供的HTML代码存在两处标签拼写错误，可能会导致样式失效：

1. 按钮标签拼写错误：<botton>改为标准的<button>
2. 内容标签拼写错误：<aritical>改为标准的<article>

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