Image occupy entire column

Question

I have the following html structure:

<div class="col-8 ml-2 bg-secondary">
        <h3 class="">Ultimas Notícias</h3>
        <div class="card">
            <div class="row">
                <div class="col-3 bg-dark">
                    <img src="http://via.placeholder.com/900x500" class="w-100">
                </div>
                <div class="col-9">
                    <div class="card-block">
                        <div class="card-title font-weight-bold mb-0">
                            Lorem ipsum dolor sit amet
                        </div>
                        <div class="card-text ">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsum minima minus
                                modi nobis quisquam tempora temporibus? Ad aspernatur dolorum maxime nesciunt omnis
                                reprehenderit suscipit.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Resulting in:

I want to make the image take up all the space in the column, which would be the dark black part (but the dark black part should line up with Last News and not go off the card)

Answer 1

In reality bootstrap col-3 puts that margin.

In this case you would have to remove or create a class to take (force) the removal of the margin (or padding).

Use your browser inspector to find out what margin or padding is in the element with col-3.

Or use some native bootstrap class to remove. You may already have something ready to reset the property in question.

Answer 2

Young you can use overflow:hidden in div so if the image is larger than the Father she will "cut" and not be interfering with the other elements.

See Example. I took and removed the padding default that Bootstrap puts on divs

OBS1: Notice that I put in the image the size of height: 100% and width: 120% for you to see that even though it’s bigger it doesn’t stay out of the div

OBS2: To center the image between transform:translate() to center the image within the div

.clip {
    overflow: hidden;
    padding: 0;
    position: relative;
}
.clip img {
    height: 120%;
    width: 120% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

<div class="col-8 ml-2 bg-secondary">
    <h3 class="">Ultimas Notícias</h3>
    <div class="card">
        <div class="row">
            <div class="col-3 bg-dark clip">
                <img src="http://via.placeholder.com/900x500" class="w-100">
            </div>
            <div class="col-9">
                <div class="card-block">
                    <div class="card-title font-weight-bold mb-0">
                        Lorem ipsum dolor sit amet
                    </div>
                    <div class="card-text ">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsum minima minus
                            modi nobis quisquam tempora temporibus? Ad aspernatur dolorum maxime nesciunt omnis
                            reprehenderit suscipit.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

If you need to put rules of response within the @media

Answer 3

I believe you can solve your problem by using the card-img class in Bootstrap, and adding the following code to your css:

.card-img {
  width: 100%;
  height: auto;
}

It is interesting to read the documentation of Bootstrap 4 about Cards as well. Send feedback on whether it worked or not, and we can look at other solutions. I suggest posting the CSS of your code as well so we can see what’s been done.

Answer 4

I would suggest using the image as background, so it would occupy the whole div and would not lose the Aspect ratio (ratio), automatically adjusting to the size of the div and add style inline right on the tag.

Just create and add a class in the div:

.imagem{
   background-size: cover !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="col-8 ml-2 bg-secondary">
     <h3 class="">Ultimas Notícias</h3>
     <div class="card">
         <div class="row">
             <div class="col-3 bg-dark imagem" style="background:url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg) center;">
             </div>
             <div class="col-9">
                 <div class="card-block">
                     <div class="card-title font-weight-bold mb-0">
                         Lorem ipsum dolor sit amet
                     </div>
                     <div class="card-text ">
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsum minima minus
                             modi nobis quisquam tempora temporibus? Ad aspernatur dolorum maxime nesciunt omnis
                             reprehenderit suscipit.
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>