Image occupy entire column

Navigation
1

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 occupy all of the column space, which would be the dark black part (but the dark black part should align with the latest news and not out of the card)

    
asked by anonymous 19.03.2018 / 17:50

4 answers

1

I suggested using the image as background , so it would occupy all div and would not lose the aspect ratio , automatically adjusting itself to the dimension of div and add the inline style in the tag.

Just create and add a class in div : 

.imagem{
   background-size: cover !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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>
    
19.03.2018 / 19:43
2

In reality, bootstrap col-3 poe this margin.

In this case you would have to remove or create a class to remove the padding.

Use your browser's inspector to find out which border or padding is on the col3 element.

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

    
19.03.2018 / 17:54
1

I think 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's interesting to read the Bootstrap 4 documentation on Cards as well. Give us feedback whether it worked or not, and we can look at other solutions. I suggest posting the CSS of your code also so we can see what has been done.

    
19.03.2018 / 18:35
1

Young you can use overflow:hidden in div so if the image is bigger than the Father it will "cut" and not interfere with the other elements.

See the example. I took advantage of and removed the padding default that Bootstrap places in divs

OBS1: Note that I have put in the image the size of height: 100% and width: 120% so you can see that even though it is bigger it does not stay out of div

OBS2: To center the image between transform:translate() to center the image within 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 place resposibility rules within @media

    
19.03.2018 / 18:29
Delete last comma from a string UPDATE WITH CASE SQL