时间戳

首页 > 解决方案 > 使用 Bootstrap 的产品示例并试图弄清楚我如何添加图像

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

问题描述

我正在使用 Bootstrap 4 并使用他们的产品示例作为基础：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>

标签： htmlimagebootstrap-4responsive-images

解决方案

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

推荐阅读