如何在Django项目的Bootstrap 5博客示例指定div中嵌入图片

要实现你想要的效果，核心是利用Bootstrap栅格系统拆分左右布局，同时通过背景图+遮罩保证文字可读性，具体修改如下：

修改后的全屏背景图版本 #

<div class="p-4 p-md-5 mb-4 rounded position-relative overflow-hidden text-bg-dark">
  <!-- 半透明深色遮罩，确保文字清晰可读 -->
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-75 z-0"></div>
  <!-- 全屏背景图片 -->
  <img src="你的图片路径" class="position-absolute top-0 start-0 w-100 h-100 object-cover z-n1" alt="店铺场景">
  <!-- 内容容器，栅格拆分左右布局 -->
  <div class="row g-0 position-relative z-1">
    <div class="col-md-6 px-0 px-md-5 py-4 py-md-5">
      <h1 class="display-4 text-white fst-italic">We are opening our 4th location in March 2023</h1>
      <p class="lead my-3 text-white">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
    </div>
    <!-- 右侧占位列，平衡布局，移动端自动隐藏 -->
    <div class="col-md-6 d-none d-md-block"></div>
  </div>
</div>

右侧独立图片版本（仅右侧显示图片） #

如果希望图片只占据右侧区域，而非全屏背景，可以用这种布局：

<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
  <div class="row g-0 align-items-center">
    <div class="col-md-6 px-0 px-md-5">
      <h1 class="display-4 text-white fst-italic">We are opening our 4th location in March 2023</h1>
      <p class="lead my-3 text-white">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
    </div>
    <div class="col-md-6">
      <img src="你的图片路径" class="w-100 h-100 object-cover rounded-end" alt="店铺场景">
    </div>
  </div>
</div>

关键细节说明 #

• 响应式适配：用col-md-6实现桌面端左右分栏，移动端自动堆叠，符合Bootstrap响应式规则
• 图片处理：object-cover属性保证图片按比例填充容器，不会拉伸变形
• 层级控制：通过z-index相关类（z-0/z-n1/z-1）确保文字始终在最上层，遮罩和图片不遮挡内容
• Django项目适配：图片路径替换为Django静态文件标签，比如{% static 'images/store-location.jpg' %}，记得先在模板开头加载{% load static %}

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