如何修复网页在1280/1366PC分辨率下的响应式适配问题

你的布局异常是几个固定宽度规则冲突导致的，和object-fit属性无关：

• .zgrade设置了固定min-width: 428px，两个卡片并排时加上间距总最小宽度需要870px以上，1280/1366分辨率下如果浏览器有书签栏、开启系统缩放，内容区宽度经常不足870px，直接导致内容溢出挤压
• .zgradeimg写死了width: 500px，父容器收缩时图片不会自适应缩放，直接撑破布局
• 外层.container1自定义的flex布局和内部Bootstrap的row默认flex、负margin规则冲突，宽度计算逻辑混乱
• 你给.container1的直接子元素（也就是row容器）写死了height: 325px，内容溢出时会被固定高度裁切变形

直接替换原有对应CSS，再把HTML里用来做间距的<br>标签删掉即可，修复后完全不影响1920PC、移动端的原有显示效果：

.container1 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.container1 > .row {
  width: 100%;
  max-width: 1500px;
  margin: 0;
}

.container1 div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zgrade {
  position: relative;
  width: 100%;
  max-width: 745px;
  margin: 0 auto 10px;
  overflow: hidden;
  height: 325px;
  padding: 0 5px;
}

.zgradeimg {
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.zgrade:hover img {
  transform: scale(1.1);
}

/* 中等分辨率适配，覆盖1280、1366场景 */
@media screen and (max-width: 1400px) {
  .zgrade {
    max-width: 48%;
    height: 280px;
  }
}

@media screen and (max-width: 780px) {
  .container1 {
    flex-direction: column;
  }
  .zgrade {
    max-width: 100%;
    height: auto;
    aspect-ratio: 745 / 325;
    margin-bottom: 20px;
  }
}

• 1920分辨率下：容器最大宽度限制为1500px，两个卡片保持原有745px宽度加居中布局，和之前的显示效果完全一致
• 1280/1366分辨率下：卡片自动按48%宽度平分行内空间，不会触发最小宽度撑破布局的问题，高度等比缩放无变形
• 移动端下：保持原有竖排布局，卡片占满屏幕宽度，宽高比和原有效果一致
• 所有固定死的最小宽度、图片固定宽度规则都被替换为自适应规则，不会再出现宽度不足时的溢出挤压问题

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