Используя пример продукта Bootstrap и пытаясь понять, как я добавляю изображения - PullRequest
0 голосов
/ 30 марта 2020

Я использую 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>
...