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