使用react-bootstrap实现图片溢出容器的响应式网页模块

实现方案 #

核心逻辑 #

• 顶部图片区块不嵌套在Container组件内，直接占满全宽，自然实现超出下方容器的展示效果
• 下方文字内容保留在Container内部，自动遵循react-bootstrap的栅格响应式规则对齐
• 图片复用react-bootstrap自带的img-fluid类实现响应式适配，无需额外编写复杂媒体查询

修改后组件代码 #

import { Component } from "react";
import "../../Assets/Style/Components/Blocks/_CompanyNews.scss";
import Container from "react-bootstrap/Container";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Image from "react-bootstrap/Image";

class CompanyNews extends Component {
  render() {
    return (
      <div className="CompanyNews">
        {/* 顶部图片区块 全宽展示 不套Container */}
        <div className="labourDay-imgDiv mb-4">
          <Image src="../../images/labourDay.png" fluid alt="劳动节活动" />
        </div>
        {/* 下方内容区块 套Container 自动按响应式宽度对齐 */}
        <Container>
          <Row>
            <Col md={5}>
              <div className="Company-news">Company news</div>
            </Col>
            <Col md={7}>
              <div className="labourDay">
                <div className="labourDay1">
                  <h4>Alhadaf celebrates the Labor Day with Employees </h4>
                  <div>
                    <p>
                      Alhadaf国际公司正在启动新生产线，推出护士帽和PE手套产品。我们是本地区家用和餐饮行业食品包装、一次性用品的头部生产商之一，始终以极具竞争力的价格提供高品质产品。公司管理层一直要求我们超越对客户的承诺，在优惠价格基础上提供最优的产品和服务。我们秉承这份承诺，始终致力于为全球各地的客户提供全流程的顺畅服务，这也是客户反复选择我们的原因。我们配备行业顶尖的生产设备，结合20多年的生产和品控经验，保障所有产品品质达标。全公司一直贯彻持续优化的理念，力求超出客户预期，精准匹配客户需求。Al Hadaf灵活的生产模式可支持客户定制需求，目前产品阵容包含1500多款商品，核心产品包括...
                    </p>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}
export default CompanyNews;

补充SCSS样式（写在_CompanyNews.scss中） #

.CompanyNews {
  overflow-x: hidden; // 避免小屏幕下出现横向滚动条
  .labourDay-imgDiv {
    // 如果CompanyNews外层有固定宽度限制，加下面两行强制拉满全视口宽度
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    img {
      width: 100%;
      height: auto;
      object-fit: cover; // 可根据设计图调整图片裁剪规则
    }
  }
  // 原有自定义样式可保留
}

如果你的CompanyNews组件外层已经是全宽布局，没有父级宽度限制，SCSS里的width: 100vw和margin-left两行可以直接删除，仅用官方的fluid类就可以实现响应式全宽展示。栅格的md断点也可以根据实际设计要求替换为sm/lg等其他断点，自动适配不同屏幕尺寸。

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