4

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.

1
  • 1
    No estoy muy seguro, pero tal vez es porque la clase 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 clase p-0 al contenedor col y verifica el resultado. Saludos el 12 ago. 2021 a las 18:25

2 respuestas 2

6

Por defecto hay un espaciado (padding horizontal) en los contenedores dentro de row, por lo que debes quitarlo usando una regla de padding como px-0 (padding-left y padding-right 0px)

<link href="https://cdn.jsdelivr.net/npm/bo[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 px-0">
                <img src="https://via.placeholder.com/728x90.png" alt="header" class="img-fluid">
        </div>
    </div>
</main>

3

Por defecto todas las col tiene una propiedad de padding definida, para modificar esa espacio interno puedes usar las clases de Spacing que bootstrap5 tiene. en la liga puedes encontrar mas sobre el tema.

Con esa información puedes resolver tu problema agregando la clase .p-0 para eliminar todos los espacios

<div class="col-12 col-lg-6 col-md-6 bg-primary p-0">
                <img src="./images/image-header-desktop.jpg" alt="header" class="img-fluid">
        </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.