固定宽度的 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 左右留出一些边距。