固定宽度的div内的全宽图片

Question

我只希望这些图像拉伸以占据其内部div的整个宽度。

几乎所有样式都只使用Bootstrap 4，但是我也添加了一些东西...

<div class="row py-5">
    <div id="div-sillar" data-aos="fade-up" data-aos-duration="2000" class="col-sm tarjeta mx-4 text-center mt-2">
        <div class="fll">
            <img class="rounded img-fluid margin-left" src="../../html/assets/media/index/productos-sillar.webp" alt="Sillar y Cantera Sillar">

        </div>
        <h4 class="text-center text-uppercase my-3">sillar</h4>
        <hr class="estilo">
        <p class="text-justify fuente-open ">Tenemos una gran variedad de colores, capacidad de producción para cualquier tamaño de proyecto y una calidad y precio
            que hace que nuestros aliados nos elijan.</p>
    </div>
    <div id="div-cantera" data-aos="fade-up" data-aos-duration="2500" class="col-sm tarjeta mx-4 text-center mt-2">
        <img class="rounded img-fluid" src="../../html/assets/media/index/productos-cantera.webp" alt="Sillar y Cantera Cantera">
        <h4 class="text-center text-uppercase my-3">cantera</h4>
        <hr class="estilo">
        <p class="text-justify fuente-open">
            No solo son bloques de sillar también tenemos diferentes productos de cantera de excelente gusto y gran calidad.
        </p>
    </div>
    <div id="div-flete" data-aos="fade-up" data-aos-duration="3000" class="col-sm tarjeta mx-4 text-center mt-2">
        <img class="rounded img-fluid" src="../../html/assets/media/index/productos-sillar.webp" alt="Sillar y Cantera Flete Logística">
        <h4 class="text-center text-uppercase my-3">flete y logística</h4>
        <hr class="estilo">
        <p class="text-justify fuente-open">
            Atendemos y enviamos a toda la república mexicana tenemos proveedores competitivos de logística para tu proyecto. nosotros
            nos encargamos.
        </p>
    </div>
</div>

Answer 1

从列中删除填充，并使图像宽度为100％；但是现在您必须为图像设置一些固定的高度，否则要保持宽高比，图像高度将相应增加。 如果您希望框内的文本有一些填充，则需要添加另一个div并在其中添加文本，并在该div的左侧和右侧留出一定的边距。

Answer 2

我基本上改用Bootstrap Cards。