使用 Bootstrap 的产品示例并试图弄清楚我如何添加图像答案

【问题标题】：Using Bootstrap's Product example and trying to figure out how I add images使用 Bootstrap 的产品示例并试图弄清楚我如何添加图像
【发布时间】：2020-07-10 09:08:15
【问题描述】：

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

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

 <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>

【问题讨论】：

要么在 div 上使用 bg-light shadow-sm mx-auto 类的背景图像，要么在该 div 中放置一个图像标签。

标签： html image bootstrap-4 responsive-images

【解决方案1】：

您可以在 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-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;
 }

【讨论】：