-2

enter image description here

I just want that those images stretch to occupy the full width of the div they are inside.

Using almost exclusively Bootstrap 4 for all the styling, but I have added some stuff too...

<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>
Harley
  • 385
  • 1
  • 2
  • 11
dawn
  • 1,327
  • 6
  • 19
  • 39
  • Please include your CSS. – Harley Aug 02 '18 at 17:20
  • Possible duplicate of [How do you stretch an image to fill a
    while keeping the image's aspect-ratio?](https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat)
     – dandeto Aug 02 '18 at 17:25

1 Answers1

1

Remove padding from the colums and make image width : 100%; but now you have to give some fixed height to the image otherwise to maintain the aspect ratio image height will increase accordingly. If you want the text in the boxes to have some padding you need to add another div and put text in that and give some margin left and right to that div.

Jatin Maheshwari
  • 11
  • 2