CODEWITHSUNDEEP
htmlcss
Yerehia
Yerehia

Reputation: 25

Bootstrap 4 fit image heigth to column size

I have a single-row grid and two columns, but the contents of each column may be larger or smaller. The left column must have a background image, which must adapt to the grid but occupy the full height. I have tried applying a background with css but this is the result:

    .back-img{
        position: static;
        background-image: url("https://www.publicdomainpictures.net/pictures/310000/velka/wooden-bacground.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        height: fit-content;
    }
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container my-5 p-5">
      <mdb-card>
        <div class="row flex">
          <div class="col">
            <div class="back-img">
              <h1>PRUEBA</h1>
              <h1>PRUEBA</h1>
              <h1>PRUEBA</h1>
              <h1>PRUEBA</h1>
              <h1>PRUEBA</h1>
              <h1>PRUEBA</h1>
            </div>
          </div>
          <div class="col-7">
            <h1>PRUEBA</h1>
            <h1>PRUEBA</h1>
            <h1>PRUEBA</h1>
            <h1>PRUEBA</h1>
            <h1>PRUEBA</h1>
            <h1>PRUEBA</h1>
            <h1>PRUEBA</h1>
            <h1>PRUEBA</h1>
          </div>
        </div>
      </mdb-card>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

The height doesn't cover the whole column, how could I do that? enter image description here

Upvotes: 0

Views: 1232

Answers (2)

Dharmik Patel
Dharmik Patel

Reputation: 1201

I think it's because of height: fit-content. Because then the image will only cover the content. Change

height: 100%

Upvotes: 1

Raydoan Anik
Raydoan Anik

Reputation: 219

use height:100% instead of height:fit-content. it will work.

Upvotes: 1

Related Questions