使用Bootstrap的Product示例，并尝试了解如何添加图像

Question

我正在使用Bootstrap4，并使用他们的产品示例作为基础：https://getbootstrap.com/docs/4.4/examples/product/

我正在试图弄清楚如何将白色和灰色背景区域转换为产品的实际照片。完整的代码片段在下面，但我尝试将彩色块更改为响应式图像是：

 <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>

完整代码片段：

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
    <div class="my-3 p-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
    <div class="my-3 py-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
</div>

Answer 1

您可以在div中使用image，如下所示：

        <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
            <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
                <div class="my-3 p-3">
                    <h2 class="display-5">Another headline</h2>
                    <p class="lead">And an even wittier subheading.</p>
                </div>
                <div class="bg-white shadow-sm mx-auto screenshot-card">
                    <img style="height:auto;width:100%" src="/images/1.png", class="mx-auto w-65 lg:w-81">
                </div>
            </div>
            <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
                <div class="my-3 py-3">
                    <h2 class="display-5">Another headline</h2>
                    <p class="lead">And an even wittier subheading.</p>
                </div>
                <div class="bg-white shadow-sm mx-auto screenshot-card">
                    <img style="height:auto;width:100%" src="/images/1.png", class="mx-auto w-65 lg:w-81">
                </div>
            </div>
        </div>

截图卡片可以使用如下类

.screenshot-card {
    width: 80%; 
    height: 100%; 
    border-radius: 21px 21px 0 0;
 }