Me gustaría saber cual es la forma adecuada para que una imagen tome el ancho y alto de un contenedor no quiero que sobren los espacios, estoy utilizando Bootstrap 5 y con la clase img-fluid
puedo hacer que la imagen crezca junto con su contenedor padre.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<main class="container d-flex align-content-center justify-content-center">
<div class="row">
<div class="col-12 col-lg-6 col-md-6 bg-warning">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis amet dolore provident praesentium vel, nam hic adipisci maxime maiores ab quidem ipsam sit facere mollitia pariatur accusantium quos voluptas voluptate?
</div>
<div class="col-12 col-lg-6 col-md-6 bg-primary ">
<img src="./images/image-header-desktop.jpg" alt="header" class="img-fluid">
</div>
</div>
</main>
Les coloque 2 fondos de distintos colores para diferenciar los contenedores, y me percato que en el contenedor que tiene la imagen no toma todo el ancho ni alto, quedan espacios de color azul y no deseo eso.
col-*
añade un padding por defecto, por lo tanto su contenido no se ajustará totalmente sino que dejará este espacio de padding. Intenta agregar la clasep-0
al contenedorcol
y verifica el resultado. Saludos