How to fit full image in panelbody/card/div?

Question

How can I fit my full image in a div/card/panel body by bootstrap4 or raw CSS? I tried it many ways. But I need a perfect way to fit my image and card in a panel body. Example:

<div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="card">
                      <div class="card-body">
                        <div class="row">
                            <div class="col-3.8">
                                <img class="rounded" style="width: 17rem;min-height: 17rem;" src="http://localhost/upwork/public/img/<?php echo $key->news_image_name ?>">
                            </div>
                            <div class="col-8">
                                <h5 class="card-title"><?php echo $key->news_title ?></h5>
                                <h10>Posted In: <?php echo $key->news_source ?></h10></br></br>
                                <p class="card-text"><?php echo $key->news_description ?></p></br></br>
                                <a href="#" class="btn btn-primary">View Details News</a>
                            </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>

if you want the image responsive you need to put img-fluid in the class next to rounded, leave a space between rounded img-fluid like that — mlegg, Apr 29 '18 at 18:25

score 0 · Answer 1 · answered Apr 29 '18 at 18:30

Firstly there is no class - col-3.8 or col-8 . You can use either col-sm-3 or col-sm-8 but according to the code provided i dont think it is needed. Just use the code i have updated-

<div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="card">
                      <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12" style="position: relative;">
                                <img class="img-responsive" src="http://localhost/upwork/public/img/<?php echo $key->news_image_name ?>">
<div style="position: absolute;bottom: 0; background:#000; color: #fff;">
<h5 class="card-title"><?php echo $key->news_title ?></h5>
                                <h10>Posted In: <?php echo $key->news_source ?></h10></br></br>
                                <p class="card-text"><?php echo $key->news_description ?></p></br></br>
                                <a href="#" class="btn btn-primary">View Details News</a>
</div>
                            </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>

1

`col-8` is actually valid. – Klooven Apr 29 '18 at 19:01

How to fit full image in panelbody/card/div?

1 Answers1